/* Generated by build/v2_guided_demo/build.mjs. Do not edit. */ /* * Little Plains design-system foundation. * * These values were resolved from the rendered site and the current production * selectors on 2026-07-10. Legacy variables in globals.css alias this layer * during migration so introducing the system does not change the UI. */ .guided-demo { /* Color */ --color-ink: #002142; --color-accent: #0398fa; --color-accent-blue: #0079ef; --color-accent-forest: #4f8254; --color-accent-green: #3a7f53; --color-accent-orange: #f58b13; --color-accent-sangria: #93213c; --color-principle-curiosity: var(--color-accent-green); --color-principle-excellence: var(--color-accent-blue); --color-principle-hospitality: var(--color-accent-orange); --color-agent-avatar: #f9e14b; --color-agent-avatar-wave: #4ca3f5; --color-agent-avatar-gull: #9e9e9e; --color-selection: #0398fa; --color-surface: #fff; --color-tooltip-background: var(--color-accent); --color-tooltip-text: var(--color-surface); /* Inline editorial explainers can change their word color independently from the dashed affordance without changing the global link/accent role. */ --color-inline-explainer-text: var(--color-accent); --color-inline-explainer-decoration: var(--color-accent); --color-text-muted: rgba(0, 33, 66, 0.62); --color-text-subtle: rgba(0, 33, 66, 0.38); --color-surface-soft: #f3f8fc; --color-surface-soft-high: #fbfdff; --color-surface-soft-low: #e8f0f6; --color-omnibar-chip-highlight: color-mix( in srgb, var(--color-accent) 12%, var(--color-surface) ); --color-card-media: color-mix( in srgb, var(--color-surface-soft) 44%, var(--color-surface) ); --color-nav-glass: rgba(240, 242, 245, 0.55); --color-nav-indicator: rgba(255, 255, 255, 0.86); --opacity-navigation-muted: 0.75; --color-nav-ink-rest: color-mix( in srgb, var(--color-text-muted) 76%, var(--color-surface) 24% ); --color-chat-sheet-header-surface: transparent; --color-site-gradient: linear-gradient( 180deg, #d9eefb 0%, #eef7fc 18%, #fff 42%, #fff 72%, #f4fbff 100% ); /* * Low-frequency backplates sampled from the responsive intro video's * authored time-zero frames. The active alias changes with the same 800px * breakpoint that selects the narrow intro media. */ --color-intro-first-frame-gradient-wide: linear-gradient( 180deg, #b5cde8 0%, #cdd7e0 10%, #a5bcd1 28%, #98b0c3 43%, #437096 51%, #1e3c52 61%, #a3a6a0 70%, #867762 100% ); --color-intro-first-frame-gradient-narrow: linear-gradient( 180deg, #abc0e8 0%, #96b5e7 25%, #80b0e9 40%, #b0cae7 50%, #9bb6cf 61%, #6285a4 72%, #6c777d 81%, #867764 100% ); --color-intro-first-frame-gradient: var( --color-intro-first-frame-gradient-wide ); /* * Fixed edge projections reproduce the authored y-axis color movement near * each responsive frame boundary. Intro roles come from the temporary * landing video. Main roles are temporal means sampled from the persistent * footer video's rendered cover crop. The active aliases switch with the * same 800px media boundary as both video sources. */ --color-browser-chrome-edge-intro-top-outer-wide: #b5cde8; --color-browser-chrome-edge-intro-top-inner-wide: #cdd7e0; --color-browser-chrome-edge-intro-bottom-inner-wide: #a3a6a0; --color-browser-chrome-edge-intro-bottom-outer-wide: #867762; --color-browser-chrome-edge-intro-top-outer-narrow: #abc0e8; --color-browser-chrome-edge-intro-top-inner-narrow: #96b5e7; --color-browser-chrome-edge-intro-bottom-inner-narrow: #6c777d; --color-browser-chrome-edge-intro-bottom-outer-narrow: #867764; --color-browser-chrome-edge-main-top-outer-wide: #93baea; --color-browser-chrome-edge-main-top-inner-wide: #96bcec; --color-browser-chrome-edge-main-bottom-inner-wide: #52633f; --color-browser-chrome-edge-main-bottom-outer-wide: #52633e; --color-browser-chrome-edge-main-top-outer-narrow: #729fe0; --color-browser-chrome-edge-main-top-inner-narrow: #77a3e2; --color-browser-chrome-edge-main-bottom-inner-narrow: #535f3b; --color-browser-chrome-edge-main-bottom-outer-narrow: #4d5538; --color-browser-chrome-edge-intro-top-outer: var( --color-browser-chrome-edge-intro-top-outer-wide ); --color-browser-chrome-edge-intro-top-inner: var( --color-browser-chrome-edge-intro-top-inner-wide ); --color-browser-chrome-edge-intro-bottom-inner: var( --color-browser-chrome-edge-intro-bottom-inner-wide ); --color-browser-chrome-edge-intro-bottom-outer: var( --color-browser-chrome-edge-intro-bottom-outer-wide ); --color-browser-chrome-edge-main-top-outer: var( --color-browser-chrome-edge-main-top-outer-wide ); --color-browser-chrome-edge-main-top-inner: var( --color-browser-chrome-edge-main-top-inner-wide ); --color-browser-chrome-edge-main-bottom-inner: var( --color-browser-chrome-edge-main-bottom-inner-wide ); --color-browser-chrome-edge-main-bottom-outer: var( --color-browser-chrome-edge-main-bottom-outer-wide ); --color-search-spectrum: linear-gradient( to right, #ff0000 0%, #ff8000 9.09%, #ffff00 18.18%, #80ff00 27.27%, #00ff00 36.36%, #00ff80 45.45%, #00ffff 54.55%, #0080ff 63.64%, #0000ff 72.73%, #8000ff 81.82%, #ff00ff 90.91%, #ff0080 100% ); /* Typography */ --font-family-reading: "Jjannon Display", serif; --font-family-ui: "Sohne", "Söhne", -apple-system, "Helvetica Neue", "Segoe UI", sans-serif; --font-family-discovery-input: "Sohne", "Söhne", -apple-system, "Helvetica Neue", "Segoe UI", sans-serif; --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --type-display-size: 42px; --type-display-line-height: 1.06; --type-case-study-hero-title-size: 54px; --type-routed-page-title-size: clamp(28.8px, 2.6vw, 45.9px); --type-heading-size: 32px; --type-heading-line-height: 1.25; --type-lead-size: 24px; --type-lead-line-height: 1.5; --type-hero-body-size: 24px; --type-hero-body-line-height: 1.6; --type-body-size: 1.2em; --type-body-line-height: 1.65; --type-case-study-rail-line-height: 1.35; --type-ocean-footer-status-size: 18px; --type-chat-response-size: var(--type-omnibar-input-size); --type-chat-response-line-height: var(--type-body-line-height); --type-chat-editorial-handoff-description-size: 13px; --type-chat-user-input-font-family: var(--font-family-reading); --type-chat-user-input-size: var(--type-chat-response-size); --type-chat-user-input-line-height: var(--type-chat-response-line-height); --type-chat-user-input-font-weight: var(--font-weight-regular); --type-ui-size: 13.68px; --type-ui-line-height: 1; --type-ui-small-size: 12.96px; --type-ui-small-line-height: 1.35; --type-tooltip-size: 14px; --type-omnibar-input-size: 18px; --type-omnibar-chip-size: 14px; --type-omnibar-section-label-size: 14px; --type-omnibar-shelf-link-size: 14px; --type-welcome-copy-size: 18px; --type-welcome-action-size: 16px; --type-uppercase-label-letter-spacing: 0.08em; --type-caption-size: 15px; --type-caption-line-height: 1.35; /* Spacing: primary ladder */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; --space-stack: var(--space-8); --space-section: var(--space-8); --space-info-intro-visual-gap: var(--space-6); --space-info-intro-copy-gap: var(--space-6); --space-info-principle-padding: calc(var(--space-8) + var(--space-4)); --space-results-end-mark-start: var(--space-6); --space-results-end-mark-end: var(--space-8); --space-results-end-mark-end-home-mobile: var(--space-6); --space-case-study-mini-link-gap: var(--space-2); --space-chat-sheet-conversation-gap: var(--space-5); --space-chat-sheet-turn-gap: var(--space-3); --space-chat-sheet-response-gap: var(--space-3); --space-chat-sheet-text-extra-inline-inset: var(--space-4); --space-chat-sheet-response-card-gap: var(--space-5); --space-chat-sheet-assistant-inline-end-inset: var(--space-4); --space-chat-project-handoff-inline-end-inset: var(--space-4); --space-chat-composer-inline-inset: calc(var(--space-5) / 2); --space-chat-composer-bottom-inset: var(--space-chat-composer-inline-inset); --space-chat-composer-block-start-inset: var(--space-3); --space-chat-ask-composer-inline-inset: var(--space-4); --space-chat-ask-composer-bottom-inset: var(--space-4); --space-omnibar-ask-bottom-inset: var(--space-4); --space-image-modal-control-safe-top: calc( var(--layout-panel-inset) + var(--layout-chrome-control-inset) + var(--control-size-icon) + var(--space-4) ); --space-omnibar-inset-large: var(--space-4); --space-omnibar-inset-small: var(--space-4); /* Mobile rails already reserve a 17px visual paint allowance around each row. Keep that allowance for shadows, add no second inter-row gap, and give each eyebrow a distinct 12px lead into its content. */ --space-omnibar-open-inset-small: var(--space-3); --space-omnibar-row-gap-large: var(--space-1); --space-omnibar-row-gap-small: 0px; --space-omnibar-item-gap-large: var(--space-3); --space-omnibar-item-gap-small: var(--space-3); --space-omnibar-action-cluster-overlap: var(--space-4); --space-omnibar-search-text-inset: calc( (var(--control-size-icon) + var(--size-icon-md)) / 2 + var(--space-2) ); --space-omnibar-chip-inline-padding: var(--control-padding-inline); --space-omnibar-mixed-shelf-group-gap-small: var(--space-4); --space-logo-tile-status-inset: 14px; /* Geometry */ --size-handwritten-heading: 91.08px; --radius-sm: 8px; --radius-md: 12px; --radius-code-block: 14px; --radius-omnibar-surface: calc(var(--control-size-icon) / 2); --radius-lg: 16px; --radius-site-container: 24px; --radius-chat-project-handoff: 24px; --radius-pill: 999px; --radius-tooltip: var(--radius-md); --layout-panel-inset: 16px; --layout-intro-welcome-panel-inset-inline: 8vw; --layout-intro-welcome-panel-inset-block: 8vh; --layout-chrome-control-inset: 16px; --layout-mobile-sheet-padding: 8px; --layout-mobile-site-panel-inset: var(--space-4); --size-browser-chrome-edge-projection-min: 16px; --layout-frame: 1180px; --layout-gutter: clamp(16px, 4vw, 48px); --layout-routed-page-gutter: clamp(24px, 4vw, 56px); --layout-grid-gap: 24px; --layout-discovery-grid-inset: 32px; --layout-discovery-grid-gap: 24px; --layout-search-results-project-grid-columns-small: 3; --layout-search-results-project-grid-columns-wide: 5; --measure-intro-entry-content: 625px; --measure-intro-entry-body: 520px; --measure-home-tour-prompt: 320px; --size-intro-entry-lottie: 300px; --size-info-how-we-work-lottie-mobile: 270px; --size-image-modal-viewport-reserve: 156px; --size-home-principle-curiosity-mobile: 286px; --size-info-who-you-are-wave-inline: min(212px, 42%); --size-results-end-mark-inline: min(80px, 16%); --aspect-content-card: 4 / 5; --aspect-chat-artifact-hero-viewport: 3 / 2; --measure-copy: 700px; --measure-control: 620px; --measure-search: 840px; --measure-omnibar-compact-search-row: 350px; --measure-nav-zone: 760px; --measure-chat-sheet: 625px; --measure-chat-prose: 42ch; --measure-chat-ask-prose: min(80%, 64ch); --measure-chat-project-handoff-min: 500px; --measure-chat-greeting: 56ch; --measure-editorial-shelf-card: calc( ( var(--measure-search) - (2 * var(--space-omnibar-inset-large)) - (5 * var(--space-omnibar-item-gap-large)) ) / 6 ); --measure-chat-content-card: var(--measure-editorial-shelf-card); --measure-inline-explainer-popover: 360px; --size-chat-sheet-initial: 416px; --size-chat-sheet: 416px; --size-chat-editorial-handoff-card: 220px; --size-chat-site-tour-card: 85px; --size-chat-sheet-bird: 120px; --space-chat-sheet-scroll-safe-top: calc( var(--control-size-icon) + var(--space-4) ); --size-ocean-footer-reveal: 100dvh; /* Controls */ --control-height-nav: 40px; --control-height-admin: 32px; --control-size-icon: 48px; --control-height-chat-composer-input: calc( var(--control-size-icon) + var(--space-2) ); --control-height-chat-composer: calc( var(--control-height-chat-composer-input) + (2 * var(--space-2)) ); --control-height-chat-ask-composer-input: calc( var(--control-size-icon) + var(--space-4) ); --control-height-chat-ask-composer: calc( var(--control-height-chat-ask-composer-input) + var(--space-chat-ask-composer-bottom-inset) ); --control-padding-block-chat-composer: var(--space-2); --control-padding-inline-chat-composer: var(--space-4); --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --control-padding-inline: 16px; --control-height-search: 70px; --control-padding-block-search: var(--space-3); --control-search-padding-inline: 24px; --control-search-icon-size: 40px; --chat-avatar-size: 24px; --control-search-gap: 12px; --control-filter-gap: 20px; /* Effects */ --effect-chat-backdrop-blur: 25px; --effect-chat-backdrop-saturation: 1.22; --effect-omnibar-backdrop-blur: 6px; --effect-omnibar-backdrop-saturation: 1; --effect-onboarding-focus-blur: 2px; --effect-onboarding-focus-feather-start: 72%; --color-chat-backdrop: rgb(255 255 255 / 33%); --color-omnibar-backdrop: rgb(255 255 255 / 8%); /* Elevation */ --shadow-card: var(--shadow-agentic-input); --shadow-card-hover: var(--shadow-agentic-input-hover); --shadow-omnibar-chip-hover: 0 1px 5px rgba(0, 33, 66, 0.06), 0 5px 18px rgba(0, 33, 66, 0.075); --shadow-agentic-input: 0 1px 4px rgba(0, 33, 66, 0.05), 0 4px 16px rgba(0, 33, 66, 0.06); --shadow-chat-ask-composer-input: 0 8px 24px rgba(0, 33, 66, 0.08); --shadow-chat-ask-composer-input-focus: 0 10px 30px rgba(0, 33, 66, 0.1); /* Filter-form companion to --shadow-agentic-input for horizontally scrolling omnibar pills. Applying the shared elevation after the scrollport clip lets the same shadow reach both sheet edges. */ --filter-omnibar-chip-rail-elevation: drop-shadow( 0 1px 4px rgba(0, 33, 66, 0.05) ) drop-shadow(0 4px 16px rgba(0, 33, 66, 0.06)); --shadow-agentic-input-hover: 0 2px 8px rgba(0, 33, 66, 0.07), 0 8px 28px rgba(0, 33, 66, 0.1); /* Hero-elevation shadow for the actively group-hover-magnified project card (see .contentCard[data-group-hover-active] in system.module.css). Slightly stronger than --shadow-artifact-card-hover so small omnibar / shelf project cards keep readable lift against white surfaces, while staying in the same neutral-black single-layer language. Distinct token name kept since .contentCardMedia's calc()-interpolated box-shadow needs its own dedicated "full strength" reference. */ --shadow-card-hero: 0 2px 20px rgba(0, 0, 0, 0.07); /* Idle shadow for project cards — same single-layer neutral-black family as --shadow-artifact-card-idle, tuned a touch stronger (12px / 10%) so the smaller project-card format still reads on white omnibar/shelf surfaces. Distinct from the shared --shadow-agentic-input/--shadow-card tokens other surfaces (search inputs, panels, etc.) depend on. */ --shadow-project-card-idle: 0 0 12px rgba(0, 0, 0, 0.1); --shadow-artifact-card-idle: 0 0 10px rgba(0, 0, 0, 0.08); /* Dedicated hover shadow for the Artifacts masonry grid, distinct from the shared --shadow-card-hover other surfaces (chat gallery, other card variants) depend on. */ --shadow-artifact-card-hover: 0 2px 17px rgba(0, 0, 0, 0.05); --shadow-static-raised: 0 2px 8px rgba(0, 33, 66, 0.07), 0 8px 28px rgba(0, 33, 66, 0.1); --shadow-panel: 0 4px 60px rgba(0, 33, 66, 0.07), 0 0 0 1px rgba(0, 33, 66, 0.03); --shadow-nav-indicator: 0 2px 10px rgba(0, 33, 66, 0.05); /* Motion */ --motion-ease-standard: cubic-bezier(0.67, 0, 0.67, 1); --motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-exit: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-hover-in: var(--motion-ease-emphasized); --motion-ease-hover-out: var(--motion-ease-exit); /* Project-card dock-magnify hover — unified with the Artifacts grid's hover-in/out curves so omnibar project shelves, homepage project grids, LogoGrid, PastWork, and search project results share the same tactile response as artifact cards (see --motion-ease-hover-*-artifact). */ --motion-ease-hover-in-card: var(--motion-ease-hover-in-artifact); --motion-ease-hover-out-card: var(--motion-ease-hover-out-artifact); /* Shared "cleanly accelerating back to rest" curve — named by shape, not by its first consumer. Kept available for surfaces that still want this tactile settle independently of the artifact/card hover family. */ --motion-ease-hover-out-tactile: cubic-bezier(0.3, 0, 0.6, 1); /* Card-shadow elevation transition — written by groupHoverMagnify.ts as a literal CSS var() string (not referenced directly in any .module.css), so grep for consumers only finds it there, not in stylesheets. Kept independent of --motion-ease-hover-in/out-card and the --motion-group-hover-duration-card/-artifact tokens (which drive the shared lift/scale magnify transition) so shadow timing can differ from lift/scale timing across every group-hover consumer. The Artifacts grid itself no longer uses this path (its hover shadow syncs to its own scale transition instead, see VisualSearchResultsGrid.module.css) but other group-hover surfaces (e.g. project cards) still do. */ --motion-ease-shadow-hover-in: cubic-bezier(0, 0, 0, 1); --motion-ease-shadow-hover-out: cubic-bezier(0.5, 0, 0, 1); --motion-duration-shadow-hover-in: 200ms; --motion-duration-shadow-hover-out: 300ms; --motion-ease-route-exit: cubic-bezier(0.5, 0, 0.5, 1); --motion-ease-route-enter: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-chrome-fade: cubic-bezier(0.5, 0, 0.5, 1); --motion-ease-footer: cubic-bezier(0.33, 1, 0.68, 1); --motion-duration-control: 180ms; /* Main mobile-nav clocks × 1.5 (Aug 3, 2026). */ --motion-duration-mobile-navigation-collapse: 570ms; --motion-duration-mobile-navigation-expand: 750ms; --motion-duration-mobile-navigation-label-collapse: 180ms; --motion-duration-mobile-navigation-label-reveal: 300ms; --motion-delay-mobile-navigation-label-reveal: 120ms; /* Soft ease-out (no overshoot). Replaces the prior expo settle that read as bounce on scroll collapse. Expand keeps the snappier curve. */ --motion-ease-mobile-navigation-collapse: cubic-bezier(0.33, 0, 0.2, 1); --motion-ease-mobile-navigation-expand: cubic-bezier(0.22, 1, 0.36, 1); /* Settled mobile Compact/Presentation icon rail: 3×32px icons + 2×12px insets. */ --mobile-navigation-collapsed-width: calc( (3 * var(--space-6)) + (2 * var(--space-3)) ); /* Expanded mobile rail: pack icon+label columns (not equal Explore-width * cells). Collapse switches to equal thirds inside the fixed icon rail. */ --mobile-navigation-label-max-inline-size: 74px; /* Trailing label feather: opaque mask stop + soft-edge span. * Settled sharp text keeps span at 0%. Collapse WAAPI grows span to * --mobile-navigation-label-mask-feather-span-active while solid wipes * 100%→0% so the soft edge trails in rather than snapping on. Expand * starts from the softer expand-active span so the reveal reads softer. */ --mobile-navigation-label-mask-solid: 100%; --mobile-navigation-label-mask-solid-feathered: 0%; --mobile-navigation-label-mask-feather-span: 0%; --mobile-navigation-label-mask-feather-span-active: 32%; --mobile-navigation-label-mask-feather-span-active-expand: 80%; --motion-duration-hover: 300ms; --motion-duration-hover-in: 140ms; --motion-duration-hover-out: 400ms; --motion-duration-tooltip: 260ms; --motion-duration-nav: 520ms; --motion-duration-reveal: 500ms; /* Intro-skipped Home soft arrival: white veil + navbar dissolve (a touch slower than shared --motion-duration-reveal so the settle is readable). */ --motion-duration-home-session-arrival: 800ms; --motion-duration-modal-open: 440ms; --motion-duration-modal-close: 340ms; /* Cover of page/neighbor content as the lightbox opens. Faster than --motion-duration-modal-open so unrelated tiles clear while the selected media still flies on the 440ms FLIP clock. */ --motion-duration-modal-wash-open: 240ms; /* Soft-reveal of page content as the lightbox wash clears. Kept slower than --motion-duration-modal-close so the FLIP media return can finish while the white cover eases out a beat longer (Office + case-study/writing). */ --motion-duration-modal-wash-close: 480ms; --motion-duration-chat-close: 180ms; --motion-duration-nav-color: 320ms; --motion-duration-card-image: 220ms; --motion-duration-tilt-follow: 180ms; --motion-duration-tilt-return: 420ms; --motion-duration-route-exit: 200ms; --motion-duration-route-enter: 240ms; /* Opacity floor of the route-content settle. Outgoing content dips to this level (never blank) and incoming content enters from it, so a project-> project route swap reads as a gentle crossfade instead of fade-to-empty. */ --motion-route-content-dim: 0.6; --motion-duration-index-enter: 450ms; --motion-duration-footer: 450ms; --motion-duration-ocean-blur: 531ms; /* Deliberately slower than this token family's original 300ms/180ms values (open/close felt like a snappy resize rather than an unfolding glide) — --motion-duration-omnibar-exit is a dedicated split off of -content specifically so the collapse timing doesn't have to inherit whatever -content is tuned to. Keep this token declared even if it looks redundant with -content's value at any given moment; consumers (DiscoveryOmnibar.module.css) reference -exit by name for the close direction specifically. */ --motion-duration-omnibar-surface: 460ms; --motion-duration-omnibar-content: 340ms; --motion-duration-omnibar-exit: 420ms; /* Open → Presentation only (Info Explore/Ask → About height collapse). Longer than the shared surface/exit clocks so that tall→short return reads as a glide instead of a snap onto the About rail. */ --motion-duration-omnibar-open-to-presentation: 720ms; /* Hard-loaded Home orchestration theater. These roles are intentionally independent from the persistent OmniBar's own state-change clocks above so the opening composition can be tuned without changing normal site interaction. */ --motion-intro-lottie-hold: 0ms; --motion-intro-video-ready-max: 600ms; --motion-intro-entry-video-ready-min: 500ms; --motion-intro-entry-video-ready-max: 5000ms; --motion-duration-intro-veil: 540ms; --motion-duration-intro-video-dwell: 600ms; --motion-duration-intro-sheet-path-video-dwell: 2000ms; /* Default Home entry rework. These clocks intentionally sit beside the preserved lab-variant timings above so the new production sequence can be tuned without changing the comparison paths. */ --motion-duration-intro-entry-video-fade: 1000ms; --motion-duration-intro-entry-video-hold: 2400ms; --motion-duration-intro-entry-sheet: 1000ms; --motion-scale-intro-entry-sheet: 0.985; --motion-distance-intro-entry-sheet: 40px; --motion-duration-intro-greeting: 1000ms; --motion-distance-intro-greeting: 16px; --motion-delay-intro-greeting: 100ms; --motion-intro-entry-actor-overlap: 365ms; --motion-duration-intro-entry-actor: 1000ms; --motion-duration-intro-entry-actor-travel: 1000ms; --motion-stagger-intro-entry-actor: 200ms; --motion-distance-intro-entry-actor: 10px; --motion-duration-home-tour-prompt-enter: var(--motion-duration-nav); --motion-distance-home-tour-prompt-enter: var(--space-7); --motion-blur-home-tour-prompt: 2px; --motion-duration-intro-omnibar-enter: 180ms; --motion-scale-intro-omnibar-enter: 0.86; --motion-duration-intro-compact-hold: 1000ms; --motion-duration-intro-search-hold: 1000ms; --motion-duration-intro-typing-character: 50ms; --motion-duration-intro-typing-hold: 3000ms; --motion-timeout-intro-typing: 6000ms; --motion-duration-intro-sheet: 700ms; --motion-intro-content-overlap: 280ms; --motion-duration-intro-media-mask: 180ms; --motion-duration-intro-welcome-media-dissolve: 2000ms; --motion-duration-intro-welcome-exit: 120ms; --motion-duration-intro-welcome-expand: 300ms; --motion-duration-intro-welcome-inset: 300ms; --motion-delay-intro-welcome-boat: 500ms; --motion-duration-intro-welcome-boat-in: 300ms; --motion-ease-intro-sheet: var(--motion-ease-footer); --motion-ease-intro-entry-sheet: cubic-bezier(0.67, 0, 0.67, 1); --motion-ease-intro-greeting-lift: cubic-bezier(0, 0, 0, 1); --motion-duration-watercolor-frame: 72ms; --motion-duration-office-carousel-fade: 500ms; --motion-hold-office-carousel: 2500ms; --motion-ease-office-carousel: cubic-bezier(0.45, 0, 0.55, 1); /* Compact opacity clock for Artifact cells revealed by the directional results observer. Masonry repositioning remains on the snappy control duration. */ --motion-duration-artifact-crossfade: 200ms; /* Directional grid reveal shared by the homepage Artifact masonry and results/index flow grids. The deliberate lead delay lets a fast scroll move through a near-white field before the direction-leading edge fades back in. */ --motion-duration-results-grid-reveal: 1000ms; --motion-delay-results-grid-reveal: 600ms; --motion-stagger-results-grid-reveal: 100ms; --motion-ease-results-grid-reveal: cubic-bezier(0.5, 0, 0.5, 1); --motion-delay-omnibar-reveal: 60ms; --motion-stagger-omnibar-item: 24ms; /* Dedicated cubic-beziers (rather than referencing the shared --motion-ease-emphasized/-exit tokens) so the OmniBar's open/close/ return-mirror motion can be tuned to its own unfolding-glide feel without moving every other consumer of those shared eases. */ --motion-ease-omnibar-surface: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-omnibar-exit: cubic-bezier(0.32, 0.72, 0, 1); --motion-ease-omnibar-return-mirror: cubic-bezier(0, 0, 0, 1); --motion-ease-omnibar-travel-return-mirror: cubic-bezier( 0.33, 0, 0.33, 1 ); --motion-perspective-card: 1000px; --motion-lift-card: -6px; --motion-lift-control: -2px; --motion-scale-hover: 1.035; --motion-scale-active: 0.97; /* Dock-style group hover: the hovered project card is the unmistakable visual hero — deeper lift/shadow than the original single-card hover, scale held steady (confidence comes from lift + elevation, not size). Siblings fall off by --motion-group-hover-falloff per distance step (lift * falloff^distance) — at 0.38 (matching the gallery/artifact families below) the immediate neighbor sits roughly halfway between idle and hover, so the now-continuous hover shadow (see groupHoverMagnify.ts's shadowStrengthProperty) reads as a genuine gradient across the magnification field instead of a hint felt only on the active card. */ --motion-group-hover-lift-card: -4px; --motion-group-hover-scale-card: 1.03; --motion-group-hover-falloff-card: 0.38; /* Unified with artifact card hover clocks (--motion-group-hover-duration- artifact-in/out) so project-card surfaces and the Artifacts grid share one duration language. Literals (not var() aliases) so JS readers via cssMotionTimeMs / getPropertyValue can parse the time; keep these in lockstep with the artifact duration tokens below. Distinct token names kept so lift/scale magnitude can still diverge per family. */ --motion-group-hover-duration-card-in: 200ms; --motion-group-hover-duration-card-out: 300ms; /* Same system for the photo/office gallery grid — deliberately more restrained than the project cards (smaller lift/scale) since tiles sit closer together and denser on screen. The falloff here is intentionally LESS steep than the cards' 0.08: the gallery's own lift/scale base is already small, so an equally steep falloff rounds neighbor participation to nothing perceptible. A higher falloff lets a bigger share of that small base actually register, so neighbors still visibly (if gently) participate instead of appearing inert. */ --motion-group-hover-lift-gallery: -2px; --motion-group-hover-scale-gallery: 1.006; --motion-group-hover-falloff-gallery: 0.38; --motion-group-hover-duration-gallery-in: 320ms; --motion-group-hover-duration-gallery-out: 320ms; /* Same system for the Artifacts masonry grid (VisualSearchResultsGrid) — matches the photo gallery's restraint, since these tiles are comparable in size/density to the gallery rather than the larger project cards. */ --motion-group-hover-lift-artifact: -3px; --motion-group-hover-scale-artifact: 1.012; --motion-group-hover-falloff-artifact: 0.38; --motion-group-hover-duration-artifact-in: 200ms; --motion-group-hover-duration-artifact-out: 300ms; /* CSS-only per-tile hover scale used by homepage Artifact cards (VisualSearchResultsGrid.module.css) and editorial-index cards that share that hover treatment. Distinct from --motion-group-hover-scale-artifact, which belongs to the currently disabled dock-style group-hover path. */ --motion-artifact-hover-scale: 1.05; /* Sourced from hover-states-css.json — the artifact card's hover-in/out curves. Project-card surfaces alias these via --motion-ease-hover-*-card so both families share one tactile response. */ --motion-ease-hover-in-artifact: cubic-bezier(0, 0, 0, 1); --motion-ease-hover-out-artifact: cubic-bezier(0.5, 0, 0, 1); --motion-index-stagger: 68ms; --motion-route-navigation-overlap: 42ms; /* Universal page-to-footer transition (SiteShell.module.css's [data-footer-phase="exiting"] rules read these as their fallback targets) — the homepage is the reference implementation for this interaction, so its scroll-intent dwell and forward slide-up timing are the site-wide defaults every route shares, not a per-route override. */ --motion-footer-intent-gate: 100ms; --motion-footer-intent-idle-reset: 360ms; --motion-footer-sheet-scale: 0.95; --motion-duration-footer-exit: 500ms; --motion-ease-footer-exit: cubic-bezier(0.4, 0, 0.8, 0.5); --motion-ocean-blur-bleed: 24px; --motion-ocean-blur-visible: 18px; --motion-intro-welcome-media-blur-bleed: var(--motion-ocean-blur-bleed); --motion-intro-welcome-media-blur-visible: var(--motion-ocean-blur-visible); --motion-ocean-blur-delay: 64ms; --motion-tooltip-intent-delay: 120ms; /* Project-card shared tooltip only (sharedContentTooltip.ts) — deliberately longer than the general --motion-tooltip-intent-delay above (used by CopyAction/RoleCard/LogoGrid/PhotoGrid) so a fast sweep across the client-logo tiles / Projects row never flashes a tooltip per card. */ --motion-tooltip-intent-delay-card: 600ms; /* Inline editorial explainer affordance. Text and decoration are separate semantic roles so the word can later return to ink while the dashed cue remains blue. */ --text-decoration-inline-explainer-style: dashed; --text-decoration-inline-explainer-thickness: 1px; --text-decoration-inline-explainer-offset: 0.15em; /* Layering. Existing components migrate to these roles incrementally. */ --z-content: 1; --z-panel: 2; --z-transition: 40; --z-popover: 70; --z-tooltip: 80; --z-modal: 74; --z-chrome: 75; --content-aside-inset-inline: var(--space-6); --content-aside-inset-block: var(--space-6); --content-aside-gap: var(--space-4); } @media (max-width: 900px) { .guided-demo { --type-heading-size: 30px; --type-lead-size: 23px; --space-section: 56px; } } @media (max-width: 800px) { .guided-demo { --color-intro-first-frame-gradient: var( --color-intro-first-frame-gradient-narrow ); --color-browser-chrome-edge-intro-top-outer: var( --color-browser-chrome-edge-intro-top-outer-narrow ); --color-browser-chrome-edge-intro-top-inner: var( --color-browser-chrome-edge-intro-top-inner-narrow ); --color-browser-chrome-edge-intro-bottom-inner: var( --color-browser-chrome-edge-intro-bottom-inner-narrow ); --color-browser-chrome-edge-intro-bottom-outer: var( --color-browser-chrome-edge-intro-bottom-outer-narrow ); --color-browser-chrome-edge-main-top-outer: var( --color-browser-chrome-edge-main-top-outer-narrow ); --color-browser-chrome-edge-main-top-inner: var( --color-browser-chrome-edge-main-top-inner-narrow ); --color-browser-chrome-edge-main-bottom-inner: var( --color-browser-chrome-edge-main-bottom-inner-narrow ); --color-browser-chrome-edge-main-bottom-outer: var( --color-browser-chrome-edge-main-bottom-outer-narrow ); --type-body-size: 18px; --layout-panel-inset: var(--layout-mobile-site-panel-inset); --layout-discovery-grid-inset: var(--space-4); --layout-discovery-grid-gap: var(--space-4); --space-chat-composer-inline-inset: var(--space-2); --space-chat-composer-block-start-inset: 10px; } } @media (max-width: 640px) { .guided-demo { --type-heading-size: 28px; --type-lead-size: 22px; --type-caption-size: 14px; --layout-gutter: 24px; --layout-grid-gap: 16px; --space-stack: 48px; --space-section: 48px; --size-image-modal-viewport-reserve: calc( var(--space-image-modal-control-safe-top) + var(--space-7) + var(--control-size-icon) + var(--space-3) ); } } .SonataGuidedDemoV1_demo{container-type:inline-size;width:100%;min-width:0;isolation:isolate;overflow:clip;border:1px solid var(--color-surface-soft-low);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);font:var(--type-caption-size)/var(--type-body-line-height) var(--font-family-ui)}.SonataGuidedDemoV1_demo *{box-sizing:border-box}.SonataGuidedDemoV1_demo p{font-size:inherit!important;margin:0}.SonataGuidedDemoV1_demo button{font-family:inherit}.SonataGuidedDemoV1_demo button,.SonataGuidedDemoV1_demo summary{cursor:pointer;touch-action:manipulation}.SonataGuidedDemoV1_demo button{transition:color var(--motion-duration-control) var(--motion-ease-standard),background-color var(--motion-duration-control) var(--motion-ease-standard)}.SonataGuidedDemoV1_demo :is(button,summary,pre):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.SonataGuidedDemoV1_demo svg{display:block;width:20px;height:20px;flex:none}.SonataGuidedDemoV1_windowBar{min-height:60px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5);border-bottom:1px solid var(--color-surface-soft-low);font-size:var(--type-omnibar-chip-size)}.SonataGuidedDemoV1_project{display:flex;align-items:center;gap:var(--space-2)}.SonataGuidedDemoV1_newChat{display:flex;align-items:center;gap:var(--space-2);min-height:44px;border:0;background:transparent;color:var(--color-text-muted);font-size:var(--type-omnibar-chip-size)}.SonataGuidedDemoV1_app{display:grid;grid-template-columns:minmax(0,1fr)}.SonataGuidedDemoV1_app[data-split=true]{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.SonataGuidedDemoV1_chat{display:flex;flex-direction:column;min-width:0;height:560px}.SonataGuidedDemoV1_thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-6)}.SonataGuidedDemoV1_empty{display:grid;place-items:center;height:100%;text-align:center}.SonataGuidedDemoV1_empty p{font:var(--font-weight-medium) var(--type-lead-size)/var(--type-heading-line-height) var(--font-family-ui);font-size:var(--type-lead-size)!important}.SonataGuidedDemoV1_exchange{max-width:680px;margin-inline:auto}.SonataGuidedDemoV1_message{font:var(--font-weight-regular) var(--type-caption-size)/var(--type-lead-line-height) var(--font-family-ui);color:var(--color-ink)}.SonataGuidedDemoV1_demo .SonataGuidedDemoV1_answer p{font:inherit;color:inherit;letter-spacing:inherit}.SonataGuidedDemoV1_userMessage{width:fit-content;max-width:90%;margin-left:auto;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface-soft)}.SonataGuidedDemoV1_assistantMessage{margin-top:var(--space-5)}.SonataGuidedDemoV1_assistantMessage p+p{margin-top:var(--space-4)}.SonataGuidedDemoV1_sources{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--type-omnibar-chip-size)}.SonataGuidedDemoV1_sources>summary{display:flex;align-items:center;gap:var(--space-2);min-height:44px;list-style:none;width:fit-content}.SonataGuidedDemoV1_sources>summary::-webkit-details-marker{display:none}.SonataGuidedDemoV1_demo .SonataGuidedDemoV1_sourceChevron{width:16px;height:16px;transition:transform var(--motion-duration-control) var(--motion-ease-enter)}.SonataGuidedDemoV1_sources[open]>summary .SonataGuidedDemoV1_sourceChevron{transform:rotate(180deg)}.SonataGuidedDemoV1_sources details[open]>summary .SonataGuidedDemoV1_sourceChevron{transform:rotate(90deg)}.SonataGuidedDemoV1_sources details summary::-webkit-details-marker{display:none}.SonataGuidedDemoV1_sources details{border-top:1px solid var(--color-surface-soft-low)}.SonataGuidedDemoV1_sources details summary{display:flex;align-items:center;gap:var(--space-2);list-style:none;min-height:44px;padding-block:var(--space-3);font:var(--type-ui-small-size)/var(--type-body-line-height) var(--font-family-mono);overflow-wrap:anywhere}.SonataGuidedDemoV1_sources pre{max-height:240px;padding:var(--space-3);background:var(--color-surface-soft-high);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;font:var(--type-ui-small-size)/var(--type-body-line-height) var(--font-family-mono)}.SonataGuidedDemoV1_artifact{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:72px;margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--color-surface-soft-low);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);text-align:left;font-size:var(--type-omnibar-chip-size)}.SonataGuidedDemoV1_artifact>span:first-of-type{flex:1}.SonataGuidedDemoV1_artifact small{display:block;color:var(--color-text-muted);margin-top:var(--space-1);font-size:var(--type-ui-small-size)}.SonataGuidedDemoV1_promptChoices{width:100%;max-width:744px;margin-inline:auto;padding:var(--space-4)}.SonataGuidedDemoV1_suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-bottom:0}.SonataGuidedDemoV1_suggestions button{min-width:0;min-height:44px;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-surface-soft-low);border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:var(--type-omnibar-chip-size);line-height:var(--type-caption-line-height)}.SonataGuidedDemoV1_app[data-split=false] .SonataGuidedDemoV1_suggestions{grid-template-columns:repeat(4,minmax(0,1fr))}.SonataGuidedDemoV1_workspace{min-width:0;border-left:1px solid var(--color-surface-soft-low);display:flex;flex-direction:column}.SonataGuidedDemoV1_toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);min-height:60px;border-bottom:1px solid var(--color-surface-soft-low)}.SonataGuidedDemoV1_toolbar strong{font-size:var(--type-omnibar-chip-size);font-weight:var(--font-weight-medium);line-height:var(--type-caption-line-height)}.SonataGuidedDemoV1_switcher{display:flex;flex:none;gap:var(--space-1)}.SonataGuidedDemoV1_switcher button{min-height:44px;padding:var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:var(--type-omnibar-chip-size);line-height:var(--type-caption-line-height)}.SonataGuidedDemoV1_switcher button[aria-pressed=true]{color:var(--color-ink);background:var(--color-surface-soft)}.SonataGuidedDemoV1_switcher .SonataGuidedDemoV1_close{width:44px;display:grid;place-items:center;padding:0}.SonataGuidedDemoV1_output{position:relative;display:grid;min-width:0;flex:1}.SonataGuidedDemoV1_output>*{grid-area:1 / 1;min-width:0}.SonataGuidedDemoV1_preview[data-hidden=true]{pointer-events:none;visibility:hidden;transition:visibility 0s var(--motion-duration-artifact-crossfade)}.SonataGuidedDemoV1_preview iframe{display:block;width:100%;min-height:432px;border:0}.SonataGuidedDemoV1_code{position:relative;z-index:1;height:100%;max-height:500px;min-height:432px;margin:0;padding:var(--space-4);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--color-surface-soft-high);font:var(--type-ui-small-size)/var(--type-body-line-height) var(--font-family-mono)}.SonataGuidedDemoV1_demo code{font:inherit}.SonataGuidedDemoV1_srOnly{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(hover:hover)and (pointer:fine){.SonataGuidedDemoV1_suggestions button:hover,.SonataGuidedDemoV1_switcher button:hover,.SonataGuidedDemoV1_newChat:hover,.SonataGuidedDemoV1_artifact:hover{color:var(--color-accent)}}@container (max-width: 640px){.SonataGuidedDemoV1_app[data-split=true]{grid-template-columns:minmax(0,1fr)}.SonataGuidedDemoV1_workspace{border-left:0;border-top:1px solid var(--color-surface-soft-low)}.SonataGuidedDemoV1_chat{height:560px}.SonataGuidedDemoV1_thread{padding:var(--space-5)}.SonataGuidedDemoV1_windowBar{padding-inline:var(--space-4)}}@container (max-width: 400px){.SonataGuidedDemoV1_thread{padding:var(--space-4)}.SonataGuidedDemoV1_chat{height:560px}.SonataGuidedDemoV1_newChat span{display:none}.SonataGuidedDemoV1_newChat{width:44px;justify-content:center}.SonataGuidedDemoV1_suggestions,.SonataGuidedDemoV1_app[data-split=false] .SonataGuidedDemoV1_suggestions{grid-template-columns:repeat(2,minmax(0,1fr))}.SonataGuidedDemoV1_suggestions button{font-size:var(--type-ui-small-size);padding-inline:var(--space-2)}.SonataGuidedDemoV1_toolbar{flex-wrap:wrap}.SonataGuidedDemoV1_toolbar strong{flex:1 1 100%;padding-top:var(--space-1)}.SonataGuidedDemoV1_switcher{width:100%}.SonataGuidedDemoV1_switcher .SonataGuidedDemoV1_close{margin-left:auto;width:44px}}.SonataGuidedDemoV1_thinking{display:inline-block;color:var(--color-text-muted);background:linear-gradient(110deg,var(--color-text-muted) 30%,var(--color-ink) 45%,var(--color-text-muted) 60%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:SonataGuidedDemoV1_thinkingShimmer calc(var(--motion-duration-control) * 10) linear infinite}@keyframes SonataGuidedDemoV1_thinkingShimmer{0%{background-position:180% 0}to{background-position:-80% 0}}.SonataGuidedDemoV1_answer[data-streaming=true] p:last-child:after{content:"";display:inline-block;width:2px;height:1em;margin-left:var(--space-1);vertical-align:-.1em;background:var(--color-text-muted)}.SonataGuidedDemoV1_stopped{color:var(--color-text-muted);margin-top:var(--space-3)!important}.SonataGuidedDemoV1_suggestions button[aria-pressed=true]{color:var(--color-accent);background:var(--color-surface-soft-high)}.SonataGuidedDemoV1_switcher button:disabled{opacity:.45;cursor:default}.SonataGuidedDemoV1_previewFrame{position:relative;min-height:432px}.SonataGuidedDemoV1_previewFrame iframe{transition:opacity var(--motion-duration-artifact-crossfade) var(--motion-ease-enter)}.SonataGuidedDemoV1_previewFrame[data-ready=false] iframe{opacity:0;pointer-events:none}.SonataGuidedDemoV1_previewLoading{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--space-3);align-items:center;justify-content:center;color:var(--color-text-muted)}.SonataGuidedDemoV1_previewLoading button{min-height:44px;padding:var(--space-2) var(--space-4);color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-surface-soft-low);border-radius:var(--radius-md)}.SonataGuidedDemoV1_sources[open]>div,.SonataGuidedDemoV1_sources details[open]>pre{animation:SonataGuidedDemoV1_disclosureIn var(--motion-duration-control) var(--motion-ease-enter)}@keyframes SonataGuidedDemoV1_disclosureIn{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.SonataGuidedDemoV1_thinking{animation:none;background:none;-webkit-text-fill-color:currentColor}.SonataGuidedDemoV1_demo button,.SonataGuidedDemoV1_previewFrame iframe,.SonataGuidedDemoV1_preview[data-hidden=true]{transition:none}.SonataGuidedDemoV1_sources[open]>div,.SonataGuidedDemoV1_sources details[open]>pre{animation:none}}@media(forced-colors:active){.SonataGuidedDemoV1_thinking{background:none;-webkit-text-fill-color:currentColor}}.SonataGuidedDemoV1_promptHeading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;margin-bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--type-omnibar-chip-size)}.SonataGuidedDemoV1_stopControl{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-ink);font-size:inherit}.SonataGuidedDemoV1_demo .SonataGuidedDemoV1_stopControl svg{width:16px;height:16px}@media(hover:hover)and (pointer:fine){.SonataGuidedDemoV1_stopControl:hover{color:var(--color-accent)}}@media(prefers-reduced-motion:reduce){.SonataGuidedDemoV1_demo .SonataGuidedDemoV1_sourceChevron{transition:none}}.SonataGuidedDemoV1_thread[data-composing=true]{display:flex;align-items:flex-end}.SonataGuidedDemoV1_composer{width:100%;max-width:680px;margin-inline:auto;padding:var(--space-4);border:1px solid var(--color-surface-soft-low);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-agentic-input)}.SonataGuidedDemoV1_composerText{display:grid;min-height:var(--control-height-chat-composer-input);overflow-wrap:anywhere}.SonataGuidedDemoV1_composerText>span{grid-area:1 / 1;min-width:0}.SonataGuidedDemoV1_typedPrompt{white-space:pre-wrap}.SonataGuidedDemoV1_promptMeasure{visibility:hidden;padding-right:var(--space-1)}.SonataGuidedDemoV1_caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-.1em}.SonataGuidedDemoV1_composerActions{display:flex;justify-content:flex-end;margin-top:var(--space-2)}.SonataGuidedDemoV1_sendIndicator{display:grid;place-items:center;width:var(--control-size-icon);height:var(--control-size-icon);border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-surface)}.SonataGuidedDemoV1_composer[data-submitting=true] .SonataGuidedDemoV1_sendIndicator{animation:SonataGuidedDemoV1_sendPress calc(var(--motion-duration-control) * 2) var(--motion-ease-enter) both}.SonataGuidedDemoV1_composer[data-submitting=true] .SonataGuidedDemoV1_caret{visibility:hidden}@keyframes SonataGuidedDemoV1_sendPress{0%,to{transform:scale(1)}50%{transform:scale(var(--motion-scale-active));background-color:var(--color-accent)}}@media(prefers-reduced-motion:reduce){.SonataGuidedDemoV1_composer .SonataGuidedDemoV1_sendIndicator{animation:none}}