/* Generated by build/v2_content_studio/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. */ .content-studio { /* 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) { .content-studio { --type-heading-size: 30px; --type-lead-size: 23px; --space-section: 56px; } } @media (max-width: 800px) { .content-studio { --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) { .content-studio { --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) ); } } .ContentStudioSectionsV1_sections{display:flex;flex-direction:column;height:100%;min-width:0}.ContentStudioSectionsV1_gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:16px 20px;border-bottom:1px solid var(--studio-line)}.ContentStudioSectionsV1_gallery button{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:1px solid transparent;background:var(--studio-panel);text-align:left}.ContentStudioSectionsV1_gallery button[aria-pressed=true]{border-color:var(--studio-ink);background:var(--studio-tile)}.ContentStudioSectionsV1_cardTitle{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;font-weight:600}.ContentStudioSectionsV1_cardTitle svg{width:12px;height:12px}.ContentStudioSectionsV1_sections .ContentStudioSectionsV1_gallery img{display:block;width:100%;height:55px;object-fit:contain}.ContentStudioSectionsV1_sections .ContentStudioSectionsV1_gallery button:last-child img{object-fit:contain}.ContentStudioSectionsV1_cardKind{font-size:9px;color:var(--studio-muted)}.ContentStudioSectionsV1_workspace{display:grid;grid-template-columns:minmax(0,1fr) 216px;flex:1;min-height:0}.ContentStudioSectionsV1_preview{display:flex;flex-direction:column;background:var(--studio-stage);min-width:0;min-height:0}.ContentStudioSectionsV1_previewHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 20px 0}.ContentStudioSectionsV1_previewHeading>span{display:flex;align-items:baseline;gap:9px}.ContentStudioSectionsV1_previewHeading strong{font-size:12px;font-weight:600}.ContentStudioSectionsV1_previewHeading>span>span{font-size:10px;color:var(--studio-muted)}.ContentStudioSectionsV1_motion{display:flex;align-items:center;gap:5px;min-height:44px;padding:4px 0 4px 8px;border:0;background:transparent;font-size:10px!important;white-space:nowrap}.ContentStudioSectionsV1_motion svg{width:12px;height:12px}.ContentStudioSectionsV1_stage{container-type:size;display:grid;place-items:center;flex:1;min-height:0;padding:4px 20px}.ContentStudioSectionsV1_frame{width:min(100%,160cqh,540px);aspect-ratio:8 / 5;position:relative;overflow:hidden;background:var(--studio-panel);box-shadow:0 0 0 1px var(--studio-line)}.ContentStudioSectionsV1_frame iframe{display:block;position:absolute;inset:0;width:1200px;height:750px;border:0;max-width:none;transform:scale(var(--section-scale));transform-origin:top left}.ContentStudioSectionsV1_previewFooter{min-height:58px;padding:4px 20px 10px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--studio-muted)}.ContentStudioSectionsV1_previewFooter>.ContentStudioSectionsV1_range{width:min(100%,540px);display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:20px;margin:0}.ContentStudioSectionsV1_previewFooter .ContentStudioSectionsV1_range>span{justify-content:flex-start;gap:8px}.ContentStudioSectionsV1_inspector{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--studio-line)}.ContentStudioSectionsV1_inspectorTabs{padding:8px 12px;border-bottom:1px solid var(--studio-line)}.ContentStudioSectionsV1_inspectorTabs .ContentStudioSectionsV1_control>span{display:none}.ContentStudioSectionsV1_inspectorTabs .ContentStudioSectionsV1_control{margin:0}.ContentStudioSectionsV1_inspectorBody{padding:16px 16px 12px;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ContentStudioSectionsV1_control{margin-bottom:18px}.ContentStudioSectionsV1_control>span,.ContentStudioSectionsV1_range>span,.ContentStudioSectionsV1_textField{display:block;font-size:11px;font-weight:600;margin-bottom:8px}.ContentStudioSectionsV1_options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.ContentStudioSectionsV1_options button{min-height:44px;padding:5px 6px;background:var(--studio-panel);border:1px solid transparent;font-size:11px!important}.ContentStudioSectionsV1_options button[aria-pressed=true]{background:var(--studio-tile);border-color:var(--studio-ink)}.ContentStudioSectionsV1_range{display:block;margin:0 0 12px}.ContentStudioSectionsV1_range>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}.ContentStudioSectionsV1_range output{color:var(--studio-muted);font-weight:400;font-size:10px;font-variant-numeric:tabular-nums}.ContentStudioSectionsV1_range input{display:block;min-width:0;width:100%;height:44px;margin:0;accent-color:var(--studio-ink);cursor:pointer}.ContentStudioSectionsV1_pairings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ContentStudioSectionsV1_pairings button{display:flex;min-height:44px;border:1px solid transparent;padding:4px;background:var(--studio-panel)}.ContentStudioSectionsV1_pairings button[aria-pressed=true]{border-color:var(--studio-ink)}.ContentStudioSectionsV1_pairings button>span{flex:1}.ContentStudioSectionsV1_families{display:grid;gap:4px}.ContentStudioSectionsV1_families button{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px;background:var(--studio-panel);border:1px solid transparent;font-size:11px!important}.ContentStudioSectionsV1_families button[aria-pressed=true]{border-color:var(--studio-ink)}.ContentStudioSectionsV1_familySwatch{display:flex;width:46px;height:28px}.ContentStudioSectionsV1_familySwatch>span{flex:1}.ContentStudioSectionsV1_families svg{margin-left:auto;width:12px;height:12px}.ContentStudioSectionsV1_action,.ContentStudioSectionsV1_reset{display:flex;align-items:center;gap:7px;min-height:44px;width:100%;padding:8px;border:0;background:var(--studio-panel);font-size:11px!important}.ContentStudioSectionsV1_action svg,.ContentStudioSectionsV1_reset svg{width:14px;height:14px}.ContentStudioSectionsV1_reset{margin-top:16px;padding-left:0;color:var(--studio-muted)!important;background:transparent}.ContentStudioSectionsV1_textField{margin-bottom:16px}.ContentStudioSectionsV1_textField textarea{display:block;width:100%;resize:vertical;min-height:72px;margin-top:8px;padding:9px;border:1px solid var(--studio-line);border-radius:0;background:var(--studio-panel);font-size:16px!important;line-height:1.3;color:var(--studio-ink)}.ContentStudioSectionsV1_srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(hover:hover){.ContentStudioSectionsV1_gallery button:hover,.ContentStudioSectionsV1_options button:hover,.ContentStudioSectionsV1_families button:hover,.ContentStudioSectionsV1_action:hover{background:var(--studio-tile)}}@container (max-width: 850px){.ContentStudioSectionsV1_gallery{gap:6px;padding:12px}.ContentStudioSectionsV1_gallery button{padding:7px;gap:5px}.ContentStudioSectionsV1_sections .ContentStudioSectionsV1_gallery img{height:45px}.ContentStudioSectionsV1_workspace{grid-template-columns:minmax(0,1fr) 192px}.ContentStudioSectionsV1_stage{padding:4px 14px}.ContentStudioSectionsV1_previewHeading,.ContentStudioSectionsV1_previewFooter{padding-inline:14px}.ContentStudioSectionsV1_previewHeading>span>span{display:none}.ContentStudioSectionsV1_inspectorBody{padding:12px}}@container (max-width: 580px){.ContentStudioSectionsV1_gallery{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.ContentStudioSectionsV1_gallery button{flex:0 0 105px;scroll-snap-align:start}.ContentStudioSectionsV1_workspace{display:flex;flex-direction:column}.ContentStudioSectionsV1_stage{min-height:200px}.ContentStudioSectionsV1_frame{max-width:400px}.ContentStudioSectionsV1_inspector{border-left:0;border-top:1px solid var(--studio-line)}.ContentStudioSectionsV1_inspectorBody{max-height:310px}}@font-face{font-family:Studio Text;src:url(v1/studio-text.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:Studio Text;src:url(v1/studio-text-semibold.ttf) format("truetype");font-weight:600;font-display:swap}@font-face{font-family:Studio Headline;src:url(v1/studio-headline.ttf) format("truetype");font-weight:600;font-display:swap}.ContentStudioV1_studio{container-type:inline-size;color:var(--color-ink);font-family:var(--font-family-ui);width:100%}.ContentStudioV1_studio *,.ContentStudioV1_studio *:before,.ContentStudioV1_studio *:after{box-sizing:border-box}.ContentStudioV1_studio button,.ContentStudioV1_studio input,.ContentStudioV1_studio textarea{font:inherit}.ContentStudioV1_studio button{cursor:pointer}.ContentStudioV1_studio button:disabled{cursor:not-allowed}.ContentStudioV1_studio button:focus-visible,.ContentStudioV1_studio input:focus-visible,.ContentStudioV1_studio textarea:focus-visible,.ContentStudioV1_studio summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.ContentStudioV1_studio svg{flex-shrink:0}.ContentStudioV1_tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-5)}.ContentStudioV1_tabs button{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:14px;line-height:1.25;transition:background var(--motion-duration-control),color var(--motion-duration-control)}.ContentStudioV1_tabs button svg{width:18px;height:18px}.ContentStudioV1_tabs button[aria-selected=true]{background:var(--color-ink);color:var(--color-surface)}.ContentStudioV1_window{--studio-ink: #161616;--studio-paper: #fff;--studio-panel: #f7f7f7;--studio-stage: #f2f2f2;--studio-tile: #e6e6e6;--studio-line: #ebebeb;--studio-muted: #707070;color:var(--studio-ink);background:var(--studio-paper);font:400 13px/1.5 Studio Text,sans-serif;border:1px solid var(--studio-line);border-radius:var(--radius-md);overflow:clip;box-shadow:var(--shadow-card)}.ContentStudioV1_window h2,.ContentStudioV1_window h3,.ContentStudioV1_window p{margin:0}.ContentStudioV1_studio .ContentStudioV1_window img{border-radius:0;box-shadow:none;background:none;aspect-ratio:auto}.ContentStudioV1_studio .ContentStudioV1_window p{font-weight:400}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_sourceThumb img{width:42px;height:42px}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_primitives img{width:48px;height:48px}.ContentStudioV1_studio .ContentStudioV1_window input,.ContentStudioV1_studio .ContentStudioV1_window textarea{font-weight:400}.ContentStudioV1_window button{color:inherit}.ContentStudioV1_windowHeader{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--studio-line)}.ContentStudioV1_windowHeader strong{font-family:Studio Headline,sans-serif;font-weight:600;font-size:20px;letter-spacing:-.5px}.ContentStudioV1_windowHeader>span{font-size:9px;letter-spacing:.12em;color:var(--studio-muted)}.ContentStudioV1_panel{height:504px;animation:ContentStudioV1_panelIn var(--motion-duration-control) ease-out}.ContentStudioV1_panel[hidden]{display:none}.ContentStudioV1_twoColumn{display:grid;grid-template-columns:172px minmax(0,1fr);height:100%}.ContentStudioV1_threeColumn{display:grid;grid-template-columns:180px minmax(0,1fr) 196px;height:100%}.ContentStudioV1_sidebar{min-width:0;padding:20px 16px;border-right:1px solid var(--studio-line);display:flex;flex-direction:column;gap:4px}.ContentStudioV1_groupTitle{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;margin:0 0 8px}.ContentStudioV1_groupTitle:not(:first-child){margin-top:16px}.ContentStudioV1_navItem{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:12px;text-align:left;border:0;border-left:2px solid transparent;background:transparent;font-size:12px!important}.ContentStudioV1_navItem svg{width:13px;opacity:0}.ContentStudioV1_navItem[aria-pressed=true]{border-left-color:var(--studio-ink);background:var(--studio-panel)}.ContentStudioV1_navItem[aria-pressed=true] svg{opacity:1}.ContentStudioV1_sideNote{margin-top:auto;padding:24px 12px 0;font-size:11px;color:var(--studio-muted)}.ContentStudioV1_sideNote>span{display:block;color:var(--studio-ink);margin-bottom:8px}.ContentStudioV1_document{padding:36px;background:var(--studio-panel);overflow:auto;min-width:0}.ContentStudioV1_eyebrow{font-size:9px;letter-spacing:.12em;color:var(--studio-muted)}.ContentStudioV1_document h2,.ContentStudioV1_componentHeading h2{font:600 40px/1.03 Studio Headline,sans-serif;letter-spacing:-1.2px;margin:18px 0 20px}.ContentStudioV1_document h2>span{display:block;color:var(--studio-muted);font-size:30px;letter-spacing:-.7px;margin-top:4px}.ContentStudioV1_lede{font-size:15px;max-width:430px;line-height:1.4}.ContentStudioV1_docCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:34px}.ContentStudioV1_docCards button{background:var(--studio-paper);padding:0 0 12px;border:0;text-align:left;min-width:0}.ContentStudioV1_studio .ContentStudioV1_docCards img{display:block;width:100%;height:154px;object-fit:contain}.ContentStudioV1_studio .ContentStudioV1_docCards button:nth-child(1) img{background:#ffc4ff}.ContentStudioV1_studio .ContentStudioV1_docCards button:nth-child(2) img{background:#ea5699}.ContentStudioV1_studio .ContentStudioV1_docCards button:nth-child(3) img{background:#eec700}.ContentStudioV1_docCards button>span{display:flex;justify-content:space-between;align-items:center;font-weight:600;padding:12px 12px 4px;font-size:13px}.ContentStudioV1_docCards svg{width:14px}.ContentStudioV1_docCards small{display:block;padding:0 12px;color:var(--studio-muted);font-size:10px}.ContentStudioV1_prose{max-width:590px;font-size:15px;line-height:1.5}.ContentStudioV1_prose h3{font-size:20px;font-weight:600;margin-top:28px}.ContentStudioV1_prose dl{margin-top:18px}.ContentStudioV1_prose dt{font-weight:600;margin-top:16px}.ContentStudioV1_prose dd{margin:4px 0 0;color:var(--studio-muted);font-size:13px}.ContentStudioV1_primitives{display:flex;margin:24px 0;gap:12px}.ContentStudioV1_primitives>div{flex:1;display:grid;justify-items:center;gap:8px;background:var(--studio-paper);padding:12px}.ContentStudioV1_primitives img{width:48px;height:48px;object-fit:contain}.ContentStudioV1_primitives small{font-size:10px;text-transform:capitalize}.ContentStudioV1_compositions{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.ContentStudioV1_compositions img{width:100%}.ContentStudioV1_colorDocs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:36px 0 24px}.ContentStudioV1_colorDocs>div{display:flex;flex-direction:column;gap:5px}.ContentStudioV1_colorDocs>div>span{height:132px;margin-bottom:8px}.ContentStudioV1_colorDocs strong{font-weight:600;font-size:12px}.ContentStudioV1_colorDocs code{color:var(--studio-muted);font-size:10px}.ContentStudioV1_textLink{display:inline-flex;align-items:center;min-height:44px;gap:8px;background:none;border:0;padding:0;font-size:12px!important}.ContentStudioV1_componentMain{min-width:0;display:flex;flex-direction:column;background:var(--studio-panel)}.ContentStudioV1_componentHeading{padding:24px 28px 18px;display:flex;justify-content:space-between;align-items:center;gap:20px}.ContentStudioV1_componentHeading h2{font-size:30px;margin:8px 0 0}.ContentStudioV1_codeToggle{min-height:44px;display:flex;align-items:center;gap:8px;border:0;padding:8px 12px;background:var(--studio-tile);font-size:11px!important}.ContentStudioV1_specimen{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;margin:0 28px 24px;background:var(--studio-paper);border:1px solid var(--studio-line);overflow:auto}.ContentStudioV1_specimen pre{width:100%;padding:24px;margin:0;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px}.ContentStudioV1_buttonExamples{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px}.ContentStudioV1_sampleLabel,.ContentStudioV1_sampleStatus{color:var(--studio-muted);font-size:11px}.ContentStudioV1_sampleStatus{min-height:17px}.ContentStudioV1_sourceButton{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:46px;padding:10px 24px;background:var(--studio-ink);color:var(--studio-paper)!important;border:1px solid var(--studio-ink);border-radius:0;font-size:14px!important;font-weight:600!important}.ContentStudioV1_sourceButton[data-variant=Outline]{background:transparent;color:var(--studio-ink)!important}.ContentStudioV1_sourceButton[data-variant=Text]{background:transparent;color:var(--studio-ink)!important;border-color:transparent}.ContentStudioV1_sourceButton:disabled{opacity:.4}.ContentStudioV1_componentControls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:16px;padding:20px 28px;border-top:1px solid var(--studio-line);background:var(--studio-paper)}.ContentStudioV1_componentControls>label:first-child{width:150px}.ContentStudioV1_componentControls>p{font-size:12px;color:var(--studio-muted);padding:14px 0}.ContentStudioV1_componentControls label,.ContentStudioV1_fieldLabel,.ContentStudioV1_inspector label{display:block;font-size:11px;font-weight:600}.ContentStudioV1_componentControls input:not([type=checkbox]),.ContentStudioV1_inspector textarea{display:block;width:100%;margin-top:8px;background:var(--studio-panel);border:1px solid transparent;border-radius:0;padding:10px 12px;font-size:16px;color:var(--studio-ink)}.ContentStudioV1_fieldLabel{margin-bottom:8px}.ContentStudioV1_choices{display:flex;gap:4px}.ContentStudioV1_choices button{flex:1;min-height:44px;border:1px solid transparent;background:var(--studio-tile);padding:9px 10px;white-space:nowrap;font-size:11px!important}.ContentStudioV1_choices button[aria-pressed=true]{border-color:var(--studio-ink);background:var(--studio-paper)}.ContentStudioV1_componentControls .ContentStudioV1_checkbox{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:400}.ContentStudioV1_checkbox input{width:16px;height:16px;accent-color:var(--studio-ink)}.ContentStudioV1_accordions{width:100%;padding:12px 24px}.ContentStudioV1_accordion{border-bottom:1px solid var(--studio-line)}.ContentStudioV1_accordion:last-child{border:0}.ContentStudioV1_accordion summary{display:flex;align-items:center;gap:16px;min-height:64px;cursor:pointer;list-style:none;font-weight:600;font-size:14px}.ContentStudioV1_accordion summary::-webkit-details-marker{display:none}.ContentStudioV1_accordionNumber{font-size:11px;color:var(--studio-muted);font-weight:400}.ContentStudioV1_accordion summary svg{margin-left:auto;transition:transform var(--motion-duration-control)}.ContentStudioV1_accordion[open] summary svg{transform:rotate(180deg)}.ContentStudioV1_accordion p{padding:0 30px 20px;font-size:12px;color:var(--studio-muted)}.ContentStudioV1_imageStage{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:24px;background:var(--studio-stage)}.ContentStudioV1_stageLabel{font-size:10px;color:var(--studio-muted);text-align:center}.ContentStudioV1_inspector{min-width:0;border-left:1px solid var(--studio-line);padding:24px 16px}.ContentStudioV1_inspector label{margin-top:20px}.ContentStudioV1_inspector textarea{line-height:1.45;min-height:108px;resize:vertical;max-height:160px}.ContentStudioV1_reset{display:flex;align-items:center;gap:8px;background:none;border:0;margin-top:14px;padding:8px 0;min-height:44px;font-size:11px!important}.ContentStudioV1_swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.ContentStudioV1_swatches button{position:relative;min-height:44px;padding:4px 0;border:0;background:transparent}.ContentStudioV1_swatches button span{display:block;height:28px;background:var(--swatch)}.ContentStudioV1_swatches button[aria-pressed=true]{border-bottom:2px solid var(--studio-ink)}.ContentStudioV1_swatches button svg{position:absolute;top:16px;left:calc(50% - 6px);width:12px;height:12px;color:var(--studio-ink)}.ContentStudioV1_frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.ContentStudioV1_frames button{display:grid;place-items:center;height:44px;min-height:44px;padding:10px;border:1px solid transparent;background:var(--studio-tile)}.ContentStudioV1_frames button svg{fill:var(--studio-ink);width:100%;height:auto;max-height:30px}.ContentStudioV1_frames button[aria-pressed=true]{border-color:var(--studio-ink)}.ContentStudioV1_imageStage{padding:32px}.ContentStudioV1_editedImage{display:block;width:100%;max-height:386px;aspect-ratio:1}.ContentStudioV1_sourceThumb{display:flex;align-items:center;gap:10px;font-size:11px;margin:20px 0 28px}.ContentStudioV1_sourceThumb img{width:42px;height:42px;object-fit:cover;background:var(--studio-tile)}.ContentStudioV1_sourceThumb small{display:block;color:var(--studio-muted);margin-top:3px}.ContentStudioV1_inspector .ContentStudioV1_range{margin:28px 0}.ContentStudioV1_range output{float:right;font-weight:400}.ContentStudioV1_range input{display:block;width:100%;margin-top:14px;min-height:30px;accent-color:var(--studio-ink)}.ContentStudioV1_exportInfo{margin-top:40px}.ContentStudioV1_exportInfo strong{font-weight:600;font-size:15px}.ContentStudioV1_exportInfo p{color:var(--studio-muted);margin-top:8px;font-size:11px}.ContentStudioV1_exportButton{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:24px;padding:10px 12px;background:var(--studio-ink);color:var(--studio-paper)!important;border:0;width:100%;min-height:44px;font-size:12px!important}.ContentStudioV1_exportStatus{display:block;min-height:32px;margin-top:12px;font-size:10px}.ContentStudioV1_footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-5);font-size:12px;line-height:1.5;color:var(--color-text-muted)}.ContentStudioV1_count{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11px;color:var(--color-text-subtle)}@keyframes ContentStudioV1_panelIn{0%{opacity:0}to{opacity:1}}@media(hover:hover){.ContentStudioV1_tabs button:not([aria-selected=true]):hover{background:var(--color-surface-soft);color:var(--color-ink)}.ContentStudioV1_navItem:hover,.ContentStudioV1_codeToggle:hover,.ContentStudioV1_choices button:hover{background:var(--studio-tile)}.ContentStudioV1_docCards button:hover img{opacity:.85}.ContentStudioV1_sourceButton:not(:disabled):hover{opacity:.72}.ContentStudioV1_textLink:hover,.ContentStudioV1_reset:hover{text-decoration:underline}}@container (max-width: 850px){.ContentStudioV1_swatches{grid-template-columns:repeat(2,1fr)}.ContentStudioV1_threeColumn{grid-template-columns:150px minmax(0,1fr) 165px}.ContentStudioV1_twoColumn{grid-template-columns:150px minmax(0,1fr)}.ContentStudioV1_document{padding:28px}.ContentStudioV1_imageStage{padding:16px}.ContentStudioV1_componentControls{gap:12px;padding:16px 24px}.ContentStudioV1_tabs button{font-size:12px;padding-inline:12px}}@container (max-width: 680px){.ContentStudioV1_tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ContentStudioV1_tabs button{justify-content:flex-start;font-size:12px;padding:10px 12px}.ContentStudioV1_windowHeader{padding-inline:16px}.ContentStudioV1_windowHeader strong{font-size:18px}.ContentStudioV1_windowHeader>span{font-size:8px}.ContentStudioV1_panel{height:auto;min-height:580px}.ContentStudioV1_twoColumn,.ContentStudioV1_threeColumn{grid-template-columns:1fr}.ContentStudioV1_sidebar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:12px;border-right:0;border-bottom:1px solid var(--studio-line)}.ContentStudioV1_sidebar>.ContentStudioV1_groupTitle,.ContentStudioV1_sideNote{display:none}.ContentStudioV1_navItem{flex:1;width:auto;padding:10px 8px;justify-content:center;font-size:11px!important;border-left:0;border-bottom:2px solid transparent}.ContentStudioV1_navItem[aria-pressed=true]{border-left:0;border-bottom-color:var(--studio-ink)}.ContentStudioV1_navItem svg{display:none}.ContentStudioV1_document{min-height:516px;padding:24px 18px}.ContentStudioV1_document h2{font-size:33px}.ContentStudioV1_document h2>span{font-size:25px}.ContentStudioV1_lede{font-size:13px}.ContentStudioV1_docCards{gap:8px;margin-top:28px}.ContentStudioV1_studio .ContentStudioV1_docCards img{height:105px}.ContentStudioV1_docCards button>span{font-size:11px;padding-inline:8px}.ContentStudioV1_docCards small{padding-inline:8px;font-size:9px}.ContentStudioV1_docCards svg{display:none}.ContentStudioV1_colorDocs>div>span{height:130px}.ContentStudioV1_colorDocs code{font-size:8px}.ContentStudioV1_componentHeading{padding:22px 18px}.ContentStudioV1_specimen{min-height:240px;margin:0 18px 18px}.ContentStudioV1_componentControls{padding:18px}.ContentStudioV1_componentControls>label:first-child{width:100%}.ContentStudioV1_accordions{padding:10px 14px}.ContentStudioV1_accordion summary{font-size:12px;gap:10px}.ContentStudioV1_accordion p{padding-left:24px}.ContentStudioV1_threeColumn .ContentStudioV1_sidebar>.ContentStudioV1_choices{flex:1}.ContentStudioV1_inspector{border-left:0;border-top:1px solid var(--studio-line);padding:18px;display:flex;flex-wrap:wrap;gap:14px}.ContentStudioV1_inspector>.ContentStudioV1_groupTitle{width:100%;margin:0}.ContentStudioV1_inspector label{flex:1;min-width:120px;margin:0}.ContentStudioV1_inspector textarea{min-height:100px}.ContentStudioV1_reset{margin:0}.ContentStudioV1_swatches{flex:1 0 236px;grid-template-columns:repeat(5,1fr)}.ContentStudioV1_frames{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.ContentStudioV1_frames button{flex:1;aspect-ratio:auto;height:46px}.ContentStudioV1_frames svg{max-width:25px}.ContentStudioV1_imageStage{padding:24px}.ContentStudioV1_editedImage{max-height:340px}.ContentStudioV1_sourceThumb{margin:0}.ContentStudioV1_exportInfo{display:none}.ContentStudioV1_inspector .ContentStudioV1_range{margin:0}.ContentStudioV1_exportButton{width:auto;margin:0 0 0 auto}.ContentStudioV1_exportStatus{width:100%;margin:0;min-height:0}.ContentStudioV1_footer{align-items:flex-start;font-size:11px}}@media(prefers-reduced-motion:reduce){.ContentStudioV1_panel{animation:none}.ContentStudioV1_tabs button,.ContentStudioV1_accordion summary svg{transition:none}}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_lede,.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_prose p{font-size:15px!important}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_sideNote p{font-size:11px!important}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_accordion p,.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_componentControls>p{font-size:12px!important}.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_exportInfo p{font-size:11px!important}@container (max-width: 680px){.ContentStudioV1_studio .ContentStudioV1_window .ContentStudioV1_lede{font-size:13px!important}}