/* Generated by tools/02-css.mjs — do not edit by hand.
   Source: cursor-clone/cloud.html (7 inlined \3c style> blocks)
   Block order is preserved exactly; the cascade depends on it. */

/* ======================================================================
   block 1/7 — SingleFile image variables
   ====================================================================== */
:root{--sf-img-14: url("/assets/5365505212a40e67.webp");--sf-img-15: url("/assets/24ec6ea4430c573a.webp")}

/* ======================================================================
   block 2/7 — compiled Tailwind (vendored from capture)
   ====================================================================== */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0#0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0#0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0#0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0#0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0#0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:#fb2c36;--color-red-600:#e40014;--color-green-50:#f0fdf4;--color-green-500:#00c758;--color-green-600:#00a544;--color-green-800:#016630;--color-green-900:#0d542b;--color-blue-50:#eff6ff;--color-blue-600:#155dfc;--color-blue-800:#193cb8;--color-blue-900:#1c398e;--color-indigo-600:#4f39f6;--color-purple-400:#c07eff;--color-slate-200:#e2e8f0;--color-slate-500:#62748e;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5dc;--color-gray-500:#6a7282;--color-gray-600:#4a5565;--color-gray-700:#364153;--color-gray-800:#1e2939;--color-gray-900:#101828;--color-gray-950:#030712;--color-neutral-500:#737373;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-md:660px;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:2.25rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:3.25rem;--text-2xl:4.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--radius-xs:4px;--radius-sm:.25rem;--radius-md:8px;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1) infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-system:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--shadow-outline-theme:0 0 0 1px var(--color-theme-border-02);--shadow-flyout:0 0 1rem #00000005,0 0 .5rem #00000002;--duration:.14s;--duration-slow:.25s;--ease-out-spring:cubic-bezier(.25,1,.5,1);--animate-gallery-marquee-item-slide-up:gallery-marquee-item-slide-up 1s var(--ease-out-spring) both;--tracking-sm:.01em;--tracking-base:.005em;--tracking-md:-.005em;--tracking-md-lg:-.0125em;--tracking-lg:-.02em;--tracking-xl:-.025em;--tracking-2xl:-.03em;--tracking-product-sm:.0044em;--leading-2xsnug:1.15;--leading-xsnug:1.2;--leading-snug-plus:1.3;--leading-cozy:1.4;--leading-product-sm:1.27273;--leading-product-base:1.33333;--leading-product-base-mono:1.25rem;--text-md-sm:1.125rem;--text-md:1.375rem;--text-md-lg:1.625rem;--text-product-sm:.6875rem;--text-product-base:.75rem;--text-product-lg:.8125rem;--text-slack-sm:.75rem;--text-slack-base:.875rem;--text-slack-lg:1rem;--katex-font-size:1.15rem;--radius-2xs:2px;--grid-gap:calc(12rem/15);--g:calc(10rem/16);--spacing-g0\.25:calc(var(--g)*.25);--spacing-g0\.5:calc(var(--g)*.5);--spacing-g0\.75:calc(var(--g)*.75);--spacing-g1:calc(var(--g)*1);--spacing-g1\.25:calc(var(--g)*1.25);--spacing-g1\.5:calc(var(--g)*1.5);--spacing-g1\.75:calc(var(--g)*1.75);--spacing-g2:calc(var(--g)*2);--spacing-g2\.5:calc(var(--g)*2.5);--spacing-g3:calc(var(--g)*3);--v:1rem*1.4;--spacing-v1\/12:calc(var(--v)*1/12);--spacing-v2\/12:calc(var(--v)*2/12);--spacing-v2\.5\/12:calc(var(--v)*2.5/12);--spacing-v3\/12:calc(var(--v)*3/12);--spacing-v4\/12:calc(var(--v)*4/12);--spacing-v5\/12:calc(var(--v)*5/12);--spacing-v6\/12:calc(var(--v)*6/12);--spacing-v7\/12:calc(var(--v)*7/12);--spacing-v8\/12:calc(var(--v)*8/12);--spacing-v9\/12:calc(var(--v)*9/12);--spacing-v10\/12:calc(var(--v)*10/12);--spacing-v1:calc(var(--v));--spacing-v1\.25:calc(var(--v)*1.25);--spacing-v1\.5:calc(var(--v)*1.5);--spacing-v2:calc(var(--v)*2);--spacing-v2\.5:calc(var(--v)*2.5);--spacing-v3:calc(var(--v)*3);--spacing-v4:calc(var(--v)*4);--spacing-v4\.5:calc(var(--v)*4.5);--spacing-v5:calc(var(--v)*5);--spacing-v6:calc(var(--v)*6);--spacing-v8:calc(var(--v)*8);--spacing-prose-narrow:48ch;--spacing-prose-medium-wide:80ch;--spacing-prose-wide:96ch;--button-padding-default:.89em 1.45em .91em;--button-padding-md-sm:.64em 1.2em .66em;--button-padding-sm:.45em .8em .46em;--button-padding-xs:.15em .5em;--site-header-height:56px;--site-sticky-top:64px;--max-width-container:1300px;--color-theme-bg:#f7f7f4;--color-theme-fg:#26251e;--color-theme-fg-01:#26251e03}@supports (color:lab(0%0 0)){:root{--color-red-500:lab(55.4814%75.0732 48.8528);--color-red-600:lab(48.4493%77.4328 61.5452);--color-green-50:lab(98.1563% -5.60117 2.75915);--color-green-500:lab(70.5521% -66.5147 45.8073);--color-green-600:lab(59.0978% -58.6621 41.2579);--color-green-800:lab(37.4616% -36.7971 22.9692);--color-green-900:lab(30.797% -29.6927 17.382);--color-blue-50:lab(96.492% -1.14644-5.11479);--color-blue-600:lab(44.0605%29.0279-86.0352);--color-blue-800:lab(30.2514%27.7853-70.2699);--color-blue-900:lab(26.1542%15.7545-51.5504);--color-indigo-600:lab(38.4009%52.6132-92.3857);--color-purple-400:lab(63.6946%47.6127-59.2066);--color-slate-200:lab(91.7353% -.998765-4.76968);--color-slate-500:lab(48.0876% -2.03595-16.5814);--color-gray-50:lab(98.2596% -.247031-.706708);--color-gray-100:lab(96.1596% -.0823438-1.13575);--color-gray-200:lab(91.6229% -.159115-2.26791);--color-gray-300:lab(85.1236% -.612259-3.7138);--color-gray-500:lab(47.7841% -.393182-10.0268);--color-gray-600:lab(35.6337% -1.58697-10.8425);--color-gray-700:lab(27.1134% -.956401-12.3224);--color-gray-800:lab(16.1051% -1.18239-11.7533);--color-gray-900:lab(8.11897%.811279-12.254);--color-gray-950:lab(1.90334%.278696-5.48866);--color-neutral-500:lab(48.496%0 0);--color-neutral-800:lab(15.204%0-.00000596046);--color-neutral-900:lab(7.78201% -.0000149012 0)}}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-01:color-mix(in oklab,var(--color-theme-fg) 1%,transparent)}}:root{--color-theme-fg-02-5:#26251e06}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-02-5:color-mix(in oklab,var(--color-theme-fg) 2.5%,transparent)}}:root{--color-theme-fg-05:#26251e0d}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-05:color-mix(in oklab,var(--color-theme-fg) 5%,transparent)}}:root{--color-theme-fg-07-5:#26251e13}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-07-5:color-mix(in oklab,var(--color-theme-fg) 7.5%,transparent)}}:root{--color-theme-fg-08:#26251e14}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-08:color-mix(in oklab,var(--color-theme-fg) 8%,transparent)}}:root{--color-theme-fg-10:#26251e1a}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-10:color-mix(in oklab,var(--color-theme-fg) 10%,transparent)}}:root{--color-theme-fg-15:#26251e26}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-15:color-mix(in oklab,var(--color-theme-fg) 15%,transparent)}}:root{--color-theme-fg-20:#26251e33}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-fg-20:color-mix(in oklab,var(--color-theme-fg) 20%,transparent)}}:root{--color-theme-card-hex:#f2f1ed;--color-theme-card:linear-gradient(var(--color-theme-card-hex) 0% 100%);--color-theme-accent:#f54e00;--color-theme-text:var(--color-theme-fg);--color-theme-text-mid:#26251e80}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-text-mid:color-mix(in oklab,var(--color-theme-fg) 50%,transparent)}}:root{--color-theme-text-sec:#26251e99}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-text-sec:color-mix(in oklab,var(--color-theme-fg) 60%,transparent)}}:root{--color-theme-text-tertiary:#26251e66}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-text-tertiary:color-mix(in oklab,var(--color-theme-fg) 40%,transparent)}}:root{--color-theme-card-01-hex:#f0efeb;--color-theme-card-02-hex:#ebeae5;--color-theme-card-02:linear-gradient(var(--color-theme-fg-02-5) 0% 100%),linear-gradient(var(--color-theme-card-hex) 0% 100%);--color-theme-card-03-hex:#e6e5e0;--color-theme-card-03:linear-gradient(var(--color-theme-fg-05) 0% 100%),linear-gradient(var(--color-theme-card-hex) 0% 100%);--color-theme-card-04-hex:#e1e0db;--color-theme-card-warm-hex:#f3ede6;--color-theme-fg-02:#3b3a33;--color-theme-border-01:#26251e06}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-border-01:color-mix(in oklab,var(--color-theme-fg) 2.5%,transparent)}}:root{--color-theme-border-01-5:#26251e0d}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-border-01-5:color-mix(in oklab,var(--color-theme-fg) 5%,transparent)}}:root{--color-theme-border-02:#26251e1a}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-border-02:color-mix(in oklab,var(--color-theme-fg) 10%,transparent)}}:root{--color-theme-border-02-5:#26251e33}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-border-02-5:color-mix(in oklab,var(--color-theme-fg) 20%,transparent)}}:root{--color-theme-border-03:#26251e99}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-border-03:color-mix(in oklab,var(--color-theme-fg) 60%,transparent)}}:root{--color-theme-border:var(--color-theme-border-01);--color-theme-card-hover-hex:#ebeae5;--color-theme-card-hover-light-hex:#f0efeb;--color-theme-card-hover-border:var(--color-theme-border-02);--color-theme-button-bg:var(--color-theme-fg);--color-theme-button-text:var(--color-theme-bg);--color-theme-button-hover-bg:var(--color-theme-fg-02);--color-theme-button-hover-border:var(--color-theme-fg-02);--color-theme-button-hover-text:var(--color-theme-bg);--color-theme-button-sec-bg:transparent;--color-theme-button-sec-border:var(--color-theme-border-03);--color-theme-button-sec-text:var(--color-theme-fg);--prose-body:var(--color-theme-fg);--prose-headings:var(--color-theme-fg);--prose-bullets:#26251e66}@supports (color:color-mix(in lab,red,red)){:root{--prose-bullets:color-mix(in oklab,var(--color-theme-fg) 40%,transparent)}}:root{--prose-hr:var(--color-theme-border-02);--prose-captions:var(--color-theme-text-sec);--prose-code:var(--color-theme-fg);--prose-code-bg:var(--color-theme-card-hex);--prose-code-border:var(--color-theme-border-01);--prose-code-border-radius:var(--radius-xs);--prose-pre-code:var(--color-theme-fg);--prose-pre-bg:var(--color-theme-border-01);--color-theme-product-chrome:var(--color-theme-card-hex);--color-theme-product-editor:var(--color-theme-bg);--color-theme-product-text:#26251eeb}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-product-text:color-mix(in oklab,var(--color-theme-fg) 92%,transparent)}}:root{--color-theme-product-text-sec:#26251e99}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-product-text-sec:color-mix(in oklab,var(--color-theme-fg) 60%,transparent)}}:root{--color-theme-product-text-tertiary:#26251e66}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-product-text-tertiary:color-mix(in oklab,var(--color-theme-fg) 40%,transparent)}}:root{--color-theme-product-ansi-green:#1f8a65;--color-theme-product-ansi-red:#cf2d56;--color-theme-product-line-inserted-line-background:#1f8a6514}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-product-line-inserted-line-background:color-mix(in srgb,var(--color-theme-product-ansi-green) 8%,transparent)}}:root{--color-theme-product-removed-line-background:#cf2d560f}@supports (color:color-mix(in lab,red,red)){:root{--color-theme-product-removed-line-background:color-mix(in srgb,var(--color-theme-product-ansi-red) 6%,transparent)}}[data-theme=dark]{--color-theme-bg:#14120b;--color-theme-fg:#edecec;--color-theme-fg-02:#d7d6d5;--color-theme-card-hex:#1b1913;--color-theme-card-rgb:27 29 39;--color-theme-card-01-hex:#1d1b15;--color-theme-card-02-hex:#201e18;--color-theme-card-03-hex:#26241e;--color-theme-card-04-hex:#2b2923;--color-theme-card-hover-hex:#201e18;--color-theme-card-hover-light-hex:#1d1b15;--color-theme-card-warm-hex:#1c1713;--color-theme-product-chrome:var(--color-theme-bg);--color-theme-product-editor:var(--color-theme-card-hex);--color-theme-product-text:#26251eeb}@supports (color:color-mix(in lab,red,red)){[data-theme=dark]{--color-theme-product-text:color-mix(in oklab,var(--color-theme-fg) 92%,transparent)}}[data-theme=dark]{--color-theme-product-text-sec:#26251e99}@supports (color:color-mix(in lab,red,red)){[data-theme=dark]{--color-theme-product-text-sec:color-mix(in oklab,var(--color-theme-fg) 60%,transparent)}}[data-theme=dark]{--color-theme-product-text-tertiary:#26251e66}@supports (color:color-mix(in lab,red,red)){[data-theme=dark]{--color-theme-product-text-tertiary:color-mix(in oklab,var(--color-theme-fg) 40%,transparent)}}[data-theme=dark]{--color-theme-product-ansi-green:#1f8a65;--color-theme-product-ansi-red:#cf2d56;--color-theme-product-line-inserted-line-background:#1f8a6514}@supports (color:color-mix(in lab,red,red)){[data-theme=dark]{--color-theme-product-line-inserted-line-background:color-mix(in srgb,var(--color-theme-product-ansi-green) 8%,transparent)}}[data-theme=dark]{--color-theme-product-removed-line-background:#cf2d560f}@supports (color:color-mix(in lab,red,red)){[data-theme=dark]{--color-theme-product-removed-line-background:color-mix(in srgb,var(--color-theme-product-ansi-red) 6%,transparent)}}[data-theme=dark]{--window-shadow-inner:0-1px 0 0 var(--color-theme-border-02) inset}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}h1,h2,h3{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}ol,ul{list-style:none}img,svg,video,iframe{vertical-align:middle;display:block}img,video{max-width:100%}button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}button{appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}@layer base{html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;scroll-padding-top:var(--site-sticky-top);scroll-behavior:auto;font-size:.9375rem}@media (prefers-reduced-motion:no-preference){html{scroll-snap-type:none}}@media (min-width:900px){html{font-size:1rem}}body::selection{background-color:var(--color-theme-fg-15)}body{-ms-overflow-style:-ms-autohiding-scrollbar}main{min-height:70vh}video:not([controls])::-webkit-media-controls-start-playback-button{-webkit-appearance:none!important;display:none!important}video:not([controls])::-webkit-media-controls-panel{-webkit-appearance:none!important;display:none!important}body.password-protected input[type=password]:focus,body.password-protected input[type=text]:focus{font-size:16px!important}}}@layer components{@layer components{.btn{background-color:var(--color-theme-button-bg);border:1px solid var(--color-theme-button-bg);color:var(--color-theme-button-text);cursor:pointer;font-size:var(--text-base);font-weight:var(--font-weight-normal);padding:var(--button-padding-default);border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1;display:inline-flex}.btn:hover{background-color:var(--color-theme-button-hover-bg);border-color:var(--color-theme-button-hover-border);color:var(--color-theme-button-hover-text)}.btn:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn:active{background-color:var(--color-theme-button-bg)}.btn--sm{font-size:var(--text-sm);padding:var(--button-padding-sm)}.btn--secondary{background-color:var(--color-theme-card-03-hex);border:1px solid var(--color-theme-border-01);color:var(--color-theme-text)}.btn--secondary:hover{background-color:var(--color-theme-card-04-hex);border-color:var(--color-theme-border-01);color:var(--color-theme-text)}.btn--secondary:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn--secondary:active{background-color:var(--color-theme-card-03-hex);border-color:var(--color-theme-border-01);color:var(--color-theme-text)}.btn--ghost{border:1px solid var(--color-theme-border-02-5);color:var(--color-theme-text);cursor:pointer;font-weight:var(--font-weight-normal);background-color:#0000;border-radius:3.40282e38px;justify-content:center;align-items:center;line-height:1}.btn--ghost:hover{background-color:var(--color-theme-card-hex);border-color:var(--color-theme-border-02-5);color:var(--color-theme-text)}.btn--ghost:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn--ghost:active{background-color:var(--color-theme-card-03-hex)}.btn--ghost.btn--sm{font-size:var(--text-sm);padding:var(--button-padding-sm)}.btn-tertiary:hover{color:#f54e00bf}@supports (color:color-mix(in lab,red,red)){.btn-tertiary:hover{color:color-mix(in oklab,var(--color-theme-accent) 75%,transparent)}}.btn-tertiary:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn--quaternary:hover{color:color-mix(in srgb,--alpha(var(--color-theme-fg)/60%) 75%,transparent)}@supports (color:color-mix(in lab,red,red)){.btn--quaternary:hover{color:color-mix(in oklab,var(--color-theme-text-sec) 75%,transparent)}}.btn--quaternary:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn-text{font-size:var(--text-base);line-height:var(--leading-normal);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-base);color:var(--color-theme-accent);text-decoration:none}.btn-text:hover{color:#f54e00bf}@supports (color:color-mix(in lab,red,red)){.btn-text:hover{color:color-mix(in oklab,var(--color-theme-accent) 75%,transparent)}}.btn-text:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn-icon{padding-inline-start:.25em;display:inline-flex}.btn--banner:hover{background-color:var(--color-theme-card-hover-hex);border:1px solid var(--color-theme-border);color:var(--color-theme-text)}.btn--banner:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn-block:hover{background-color:var(--color-theme-card-hover-hex)}.btn-block:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn-block:active{background-color:var(--color-theme-card-hex)}.btn--quinary{color:var(--color-theme-fg);cursor:pointer;font-size:var(--text-sm);background-color:#0000;border:1px solid #0000;padding:.25rem;text-decoration:none;display:inline-flex}.btn--quinary:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.btn--quinary:hover{color:color-mix(in oklab,var(--color-theme-fg) 75%,transparent)}}.btn--quinary:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.btn:disabled:hover,.btn--secondary:disabled:hover,.btn--ghost:disabled:hover,.btn--banner:disabled:hover,.btn--quinary:disabled:hover,.btn:disabled:active,.btn--secondary:disabled:active,.btn--ghost:disabled:active,.btn--banner:disabled:active,.btn--quinary:disabled:active{background-color:var(--color-theme-card-03-hex);border-color:var(--color-theme-border-01);color:var(--color-theme-text-sec)}.pill-padding-sm{padding:var(--button-padding-sm)}.card{position:relative}.card:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:30;position:absolute;inset:0}.card{padding-inline:var(--spacing-g1\.75);padding-top:calc(var(--spacing-g1\.75) - .1rem);padding-bottom:var(--spacing-g1\.75);background-color:var(--color-theme-card-hex);border-radius:var(--radius-xs)}.card--text{padding-inline:var(--spacing-g1\.5);padding-top:calc(var(--spacing-g1\.5) - .1rem);padding-bottom:var(--spacing-g1\.5)}.card:is(a):hover{background-color:var(--color-theme-card-hover-hex)}.card:is(a):focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.card:is(a):active,.card--no-hover:is(a):hover{background-color:var(--color-theme-card-hex)}.card--feature:is(a):hover{background-color:var(--color-theme-card-hover-light-hex)}.card-border:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:30;position:absolute;inset:0}.card--bg-02{background-color:var(--color-theme-card-02-hex)}.card--bg-02:is(a):hover{background-color:var(--color-theme-card-03-hex)}.card--flyout:before{border-color:var(--color-theme-border-01-5)}.card--media:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:2;position:absolute;inset:0}.card--media header:after{content:"";pointer-events:none;border-radius:inherit;border:1px solid var(--color-theme-border-01);z-index:2;position:absolute;inset:0}.blog-directory__row:hover:before,.blog-directory__row:hover:after{content:"";pointer-events:none;background-color:var(--color-theme-card-02-hex);height:2px;position:absolute;left:0;right:0}.blog-directory__row:hover:before{top:-1px}.blog-directory__row:hover:after{bottom:-1px}.grid-cursor-v1{--gap:var(--grid-gap);--grid-cols:12;gap:var(--gap);display:grid}.grid-cursor{grid-template-columns:repeat(24,1fr);display:grid}.insights-theme .section-number:before{content:counter(section-index)"."}.insights-theme .slide-number:before{content:counter(section-index)"."counter(slide-index)"."}.logo-garden-responsive-8{gap:var(--spacing-g0\.75);grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);display:grid}@media (min-width:420px){.logo-garden-responsive-8{gap:var(--spacing-g1)}}@media (min-width:900px){.logo-garden-responsive-8{grid-template-rows:1fr;grid-template-columns:repeat(8,1fr)}}.logo-garden-responsive-8>*{width:100%;min-width:0}media-time-range::part(thumb),media-time-range::part(slider-thumb){visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range::-webkit-slider-thumb{visibility:hidden!important;opacity:0!important;-webkit-appearance:none!important;width:0!important;height:0!important;display:none!important}media-time-range::-webkit-slider-thumb{visibility:hidden!important;opacity:0!important;-webkit-appearance:none!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range input::-webkit-slider-thumb{visibility:hidden!important;opacity:0!important;-webkit-appearance:none!important;width:0!important;height:0!important;display:none!important}media-time-range input::-webkit-slider-thumb{visibility:hidden!important;opacity:0!important;-webkit-appearance:none!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range::-moz-range-thumb{visibility:hidden!important;opacity:0!important;-moz-appearance:none!important;width:0!important;height:0!important;display:none!important}media-time-range::-moz-range-thumb{visibility:hidden!important;opacity:0!important;-moz-appearance:none!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range input::-moz-range-thumb{visibility:hidden!important;opacity:0!important;-moz-appearance:none!important;width:0!important;height:0!important;display:none!important}media-time-range input::-moz-range-thumb{visibility:hidden!important;opacity:0!important;-moz-appearance:none!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range::-ms-thumb{visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;display:none!important}media-time-range::-ms-thumb{visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range input::-ms-thumb{visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;display:none!important}media-time-range input::-ms-thumb{visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;display:none!important}.media-control-bar-time-range::-webkit-slider-track{background:0 0;border-radius:2px;height:4px}media-time-range::-webkit-slider-track{background:0 0;border-radius:2px;height:4px}.media-control-bar-time-range input::-webkit-slider-track{background:0 0;border-radius:2px;height:4px}media-time-range input::-webkit-slider-track{background:0 0;border-radius:2px;height:4px}.media-control-bar-time-range::-moz-range-track{background:0 0;border:none;border-radius:2px;height:4px}media-time-range::-moz-range-track{background:0 0;border:none;border-radius:2px;height:4px}.media-control-bar-time-range input::-moz-range-track{background:0 0;border:none;border-radius:2px;height:4px}media-time-range input::-moz-range-track{background:0 0;border:none;border-radius:2px;height:4px}.media-control-bar-time-range::-ms-track{background:0 0;border:none;border-radius:2px;height:4px}media-time-range::-ms-track{background:0 0;border:none;border-radius:2px;height:4px}.media-control-bar-time-range input::-ms-track{background:0 0;border:none;border-radius:2px;height:4px}media-time-range input::-ms-track{background:0 0;border:none;border-radius:2px;height:4px}.multicard-flex::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--theme-bg);border:5px solid #0000;border-radius:99em}.nav__link,.nav__btn{cursor:pointer;font-size:var(--text-sm);padding-inline:var(--spacing-g1\.5);padding-block:var(--spacing-v3\/12);background-color:#0000;border:1px solid #0000;display:inline-flex}.nav__link:hover,.nav__btn:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.nav__link:hover,.nav__btn:hover{color:color-mix(in oklab,var(--color-theme-fg) 75%,transparent)}}.nav__link:focus-visible,.nav__btn:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.nav__btn-caret{opacity:0;transition:opacity var(--duration) var(--ease-out-spring);align-items:center;display:flex}.nav__btn-caret--sm{font-size:var(--text-sm);line-height:var(--leading-normal);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-sm);position:absolute;inset:0 0 0 auto}.nav__btn-caret:focus-visible{opacity:1;outline:0}.nav__btn-caret:focus-visible .nav__btn-caret__icon{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.nav__btn-caret__icon{transition:transform var(--duration) var(--ease-out-spring);display:inline-flex}.nav__sub-nav{opacity:0;visibility:hidden;transition:opacity var(--duration) var(--ease-out-spring),transform var(--duration) var(--ease-out-spring),visibility 0s linear var(--duration);transform:translateY(-.4rem)}.privacy-dropdown-upward{opacity:0;visibility:hidden;transition:opacity var(--duration) var(--ease-out-spring),transform var(--duration) var(--ease-out-spring),visibility 0s linear var(--duration);transform:translateY(.4rem)}.nav__sub-nav__link{font-size:var(--text-sm);display:flex}.nav__sub-nav__link--responsive{font-size:var(--text-base)}.nav__sub-nav__link--responsive:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.nav__sub-nav__link--responsive:hover{color:color-mix(in oklab,var(--color-theme-fg) 75%,transparent)}}.nav__sub-nav__link--responsive:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}@media (min-width:768px){.nav__sub-nav__link--responsive{font-size:var(--text-sm)}}.nav__sub-nav__link:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.nav__sub-nav__link:hover{color:color-mix(in oklab,var(--color-theme-fg) 75%,transparent)}}.nav__sub-nav__link:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.nav__sub-nav__link__icon{transition:opacity var(--duration) var(--ease-out-spring)}@media (hover:none){.nav__sub-nav__link__icon{opacity:1}}@media (hover:hover){.nav__sub-nav__link__icon{opacity:0}.nav__sub-nav__link:hover .nav__sub-nav__link__icon,.nav__sub-nav__link:focus-visible .nav__sub-nav__link__icon,.footer-link:hover .nav__sub-nav__link__icon,.footer-link:focus-visible .nav__sub-nav__link__icon{opacity:1}}@keyframes navItemSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes navItemSlideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes navItemFade{0%{opacity:0}to{opacity:1}}.footer-link:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.footer-link:hover{color:color-mix(in oklab,var(--color-theme-text) 75%,transparent)}}.footer-link:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}@media (hover:hover){.footer-link:hover .footer-link__icon,.footer-link:focus-visible .footer-link__icon{opacity:1}}.skipnav{z-index:50;border-radius:3.40282e38px;display:block;position:absolute;top:.82rem;left:-.2rem}.skipnav:not(:focus-visible):not(:active){clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;overflow:hidden}.card--sub-nav{padding:calc(var(--spacing-g1) - .15em) var(--spacing-g1\.5) calc(var(--spacing-g1) + .2em)}.section{padding:var(--spacing-v3) var(--spacing-g2)}.section--breadcrumb{padding-block-start:var(--spacing-v5);padding-block-end:0}.section--breadcrumb+main>.section:first-of-type{padding-block-start:var(--spacing-v2\/12)}.section+.section.bg-theme-card-hex{margin-block-start:var(--spacing-v3);padding-block-start:var(--spacing-v4);padding-block-end:var(--spacing-v4)}.section.bg-theme-card-hex+.section--headline{padding-block-start:var(--spacing-v6)}.section--flush{padding:0}main:not(.section)>:last-child.section{padding-block-end:var(--spacing-v6)}.theme-switch-btn.is-active:before{content:"";pointer-events:none;border:1px solid var(--color-theme-border-01);z-index:2;border-radius:3.40282e38px;position:absolute;inset:0}[data-theme=dark] .media-dark{display:block!important}[data-theme=dark] .media-light{display:none!important}.icon-glyph-08{font-family:var(--font-sans);font-feature-settings:"ss08"}.icon-glyph-09{font-family:var(--font-sans);font-feature-settings:"ss09"}}}@layer utilities{.\@container{container-type:inline-size}.prose>:is(h1,h2,h3,h4,h5,h6).anchor-heading:hover .anchor-link,.prose>:is(h1,h2,h3,h4,h5,h6).anchor-heading .anchor-link:focus{opacity:1}.prose>:is(h1,h2,h3,h4,h5,h6).anchor-heading .anchor-link:hover{color:var(--color-theme-text)}.prose .math-wrapper pre:before{display:none}.prose pre.math-display:before{display:none}.prose pre:has(>code.math-display):before{display:none}.prose pre:has(>.katex-display):before{display:none}.prose pre:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:2;position:absolute;inset:0}:is(.prose pre:has(.katex),.prose pre:has(.katex-display)):before{display:none}.prose pre code:before{display:none}.prose .prose-code-block:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:2;position:absolute;inset:0}.prose .prose-code-block pre:before{display:none}.prose ol>li::marker{color:currentColor;font-weight:400}.prose ul>li::marker{color:var(--prose-bullets)}.prose a:not([class]):hover{color:currentColor}@supports (color:color-mix(in lab,red,red)){.prose a:not([class]):hover{color:color-mix(in oklab,currentColor 75%,transparent)}}.prose a.underline:hover,.prose a u:hover{color:currentColor}@supports (color:color-mix(in lab,red,red)){.prose a.underline:hover,.prose a u:hover{color:color-mix(in oklab,currentColor 75%,transparent)}}.prose.prose--blog>p:last-of-type:after{content:" ■";color:var(--color-theme-accent)}.prose.prose--blog sup a:hover{color:var(--color-theme-text);text-decoration:underline}.scrim-dark:before{content:"";pointer-events:none;background-color:var(--scrim-color,#26251e);position:absolute;inset:0}@supports (color:color-mix(in lab,red,red)){.scrim-dark:before{background-color:color-mix(in srgb,var(--scrim-color,var(--color-theme-fg)) var(--scrim-opacity,3%),transparent)}}.scrim-dark:before{z-index:5;display:none}[data-theme=dark] .scrim-dark:before{display:block}.scrim-light:before{content:"";pointer-events:none;background-color:var(--scrim-color,#26251e);position:absolute;inset:0}@supports (color:color-mix(in lab,red,red)){.scrim-light:before{background-color:color-mix(in srgb,var(--scrim-color,var(--color-theme-fg)) var(--scrim-opacity,3%),transparent)}}.scrim-light:before{z-index:5}[data-theme=dark] .scrim-light:before{display:none}.media-border-container{z-index:1;border-radius:var(--radius-xs);overflow:hidden}.media-border-container:after{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:30;position:absolute;inset:0}.media-border-container.interactive:before{content:"";pointer-events:none;z-index:5;background-color:#00000006;position:absolute;inset:0}.avatar-border-container:after{content:"";pointer-events:none;border:1px solid var(--color-theme-border-01);z-index:30;border-radius:9999px;position:absolute;inset:0}.card-border{position:relative}.card-border:before{content:"";pointer-events:none;border-radius:var(--radius-xs);border:1px solid var(--color-theme-border-01);z-index:30;position:absolute;inset:0}.scrim-both:before{content:"";pointer-events:none;background-color:var(--scrim-color,#26251e);position:absolute;inset:0}@supports (color:color-mix(in lab,red,red)){.scrim-both:before{background-color:color-mix(in srgb,var(--scrim-color,var(--color-theme-fg)) var(--scrim-opacity,3%),transparent)}}.scrim-both:before{z-index:5}.ios-glass:before{content:"";pointer-events:none;border-radius:inherit;opacity:.58;background:radial-gradient(at 50%0,#ffffff75 0%,#fff3 48%,#fff0 76%);height:34%;position:absolute;inset:0 9%auto}@media (hover:hover){.ios-glass:hover{background:linear-gradient(135deg,#ffffff78 0%,#ffffff3b 52%,#ffffff1f 100%)}}[data-theme=dark] .ios-glass:before{opacity:.5;background:radial-gradient(at 50%0,#ffffff2e 0%,#ffffff12 52%,#fff0 76%)}@media (hover:hover){[data-theme=dark] .ios-glass:hover{background:linear-gradient(135deg,#fff2 0%,#ffffff14 48%,#ffffff0b 100%);border-color:#ffffff24}}.aspect-1\/1-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}.aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.aspect-4\/3-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}.aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.aspect-8\/9-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}.aspect-8\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:112.5%}.aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-1{inset:calc(var(--spacing)*1)}.inset-x-0{inset-inline:calc(var(--spacing)*0)}.inset-x-2{inset-inline:calc(var(--spacing)*2)}.-top-\[3px\]{top:-3px}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2\.5{top:calc(var(--spacing)*2.5)}.top-\[0\.2rem\]{top:.2rem}.top-\[var\(--site-sticky-top\)\]{top:var(--site-sticky-top)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-1\.5{right:calc(var(--spacing)*1.5)}.right-3{right:calc(var(--spacing)*3)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-1{bottom:calc(var(--spacing)*1)}.bottom-1\.5{bottom:calc(var(--spacing)*1.5)}.bottom-2{bottom:calc(var(--spacing)*2)}.bottom-\[8px\]{bottom:8px}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.left-\[-2px\]{left:-2px}.z-0{z-index:0}.z-2{z-index:2}.z-10{z-index:10}.z-20{z-index:20}.z-25{z-index:25}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-full{grid-column:1/-1}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-end-2{grid-column-end:2}.col-end-3{grid-column-end:3}.row-span-full{grid-row:1/-1}.row-start-1{grid-row-start:1}.row-end-2{grid-row-end:2}@media (min-width:420px){.container{max-width:420px}}@media (min-width:660px){.container{max-width:660px}}@media (min-width:900px){.container{max-width:900px}}@media (min-width:1140px){.container{max-width:1140px}}@media (min-width:1380px){.container{max-width:1380px}}@media (min-width:1470px){.container{max-width:1470px}}.mx-1\.5{margin-inline:calc(var(--spacing)*1.5)}.mx-auto{margin-inline:auto}.my-3{margin-block:calc(var(--spacing)*3)}.my-v2{margin-block:var(--spacing-v2)}@supports (initial-letter:2) or (-webkit-initial-letter:2){.prose-dropcap>p:first-of-type:first-letter{-webkit-initial-letter:2 2;initial-letter:2 2;margin-block-start:.067rem;margin-inline:.067rem .475rem}}.mt-0{margin-top:calc(var(--spacing)*0)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\.5{margin-top:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-2\.5{margin-top:calc(var(--spacing)*2.5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-\[5px\]{margin-top:5px}.mt-\[6px\]{margin-top:6px}.mt-\[calc\(\(1lh_\+_6px_-_0\.875rem\)\/2\)\]{margin-top:calc(.5lh + 3px - .4375rem)}.mt-\[calc\(\(1lh_\+_6px_-_1\.25rem\)\/2\)\]{margin-top:calc(.5lh + 3px - .625rem)}.mt-\[calc\(\(1lh_-_0\.875rem\)\/2\)\]{margin-top:calc(.5lh - .4375rem)}.mt-\[calc\(\(1lh_-_1\.25rem\)\/2\)\]{margin-top:calc(.5lh - .625rem)}.mt-v1{margin-top:var(--spacing-v1)}.-mr-1{margin-right:calc(var(--spacing)*-1)}.mb-0\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-1\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-\[1px\]{margin-bottom:1px}.mb-\[2px\]{margin-bottom:2px}.mb-\[4px\]{margin-bottom:4px}.mb-g1{margin-bottom:var(--spacing-g1)}.mb-v1{margin-bottom:var(--spacing-v1)}.mb-v2{margin-bottom:var(--spacing-v2)}.mb-v2\.5{margin-bottom:var(--spacing-v2\.5)}.mb-v4\.5{margin-bottom:var(--spacing-v4\.5)}.mb-v6\/12{margin-bottom:var(--spacing-v6\/12)}.-ml-0\.5{margin-left:calc(var(--spacing)*-.5)}.-ml-1\.5{margin-left:calc(var(--spacing)*-1.5)}.-ml-2{margin-left:calc(var(--spacing)*-2)}.-ml-px{margin-left:-1px}.ml-1\.5{margin-left:calc(var(--spacing)*1.5)}.ml-\[7px\]{margin-left:7px}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.inline-grid{display:inline-grid}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[16\/9\]{aspect-ratio:16/9}.size-3{width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}.size-3\.5{width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-full{width:100%;height:100%}.h-2{height:calc(var(--spacing)*2)}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-\[1\.5px\]{height:1.5px}.h-\[2\.5px\]{height:2.5px}.h-\[2px\]{height:2px}.h-\[2rem\]{height:2rem}.h-\[3\.5px\]{height:3.5px}.h-\[3px\]{height:3px}.h-\[4rem\]{height:4rem}.h-\[5px\]{height:5px}.h-\[6px\]{height:6px}.h-\[7px\]{height:7px}.h-\[11px\]{height:11px}.h-\[12px\]{height:12px}.h-\[14px\]{height:14px}.h-\[22px\]{height:22px}.h-\[48px\]{height:48px}.h-\[378px\]{height:378px}.h-\[calc\(100\%-48px\)\]{height:calc(100% - 48px)}.h-\[var\(--site-header-height\)\]{height:var(--site-header-height)}.h-full{height:100%}.max-h-mobile{max-height:var(--max-h-mobile);overflow:hidden}@media (min-width:1140px){.max-h-mobile{max-height:none;overflow:visible}}.max-h-\[420px\]{max-height:420px}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\[1\.5em\]{min-height:1.5em}.min-h-\[260px\]{min-height:260px}.min-h-\[378px\]{min-height:378px}.min-h-screen{min-height:100vh}.\!w-\[380px\]{width:380px!important}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-\[1px\]{width:1px}.w-\[2px\]{width:2px}.w-\[3\.5px\]{width:3.5px}.w-\[3px\]{width:3px}.w-\[5px\]{width:5px}.w-\[6px\]{width:6px}.w-\[8px\]{width:8px}.w-\[10px\]{width:10px}.w-\[12px\]{width:12px}.w-\[16\%\]{width:16%}.w-\[22\%\]{width:22%}.w-\[27px\]{width:27px}.w-\[34\%\]{width:34%}.w-\[35\%\]{width:35%}.w-\[40\%\]{width:40%}.w-\[45\%\]{width:45%}.w-\[50\%\]{width:50%}.w-\[55\%\]{width:55%}.w-\[58\%\]{width:58%}.w-\[60\%\]{width:60%}.w-\[62\%\]{width:62%}.w-\[65\%\]{width:65%}.w-\[66\%\]{width:66%}.w-\[70\%\]{width:70%}.w-\[72\%\]{width:72%}.w-\[84\%\]{width:84%}.w-\[88px\]{width:88px}.w-\[95\.37px\]{width:95.37px}.w-\[103px\]{width:103px}.w-\[160px\]{width:160px}.w-\[204px\]{width:204px}.w-\[271px\]{width:271px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[260px\]{max-width:260px}.max-w-\[320px\]{max-width:320px}.max-w-\[430px\]{max-width:430px}.max-w-\[calc\(100\%-12px\)\]{max-width:calc(100% - 12px)}.max-w-\[min\(83\.333333\%\,360px\)\]{max-width:min(83.3333%,360px)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-prose-medium-wide{max-width:var(--spacing-prose-medium-wide)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[10rem\]{min-width:10rem}.min-w-\[172px\]{min-width:172px}.min-w-\[180px\]{min-width:180px}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink-0{flex-shrink:0}.grow,.grow-1{flex-grow:1}.origin-center{transform-origin:50%}.origin-top-left{transform-origin:0 0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.-scale-x-100{--tw-scale-x:calc(100%*-1);scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-\[0\.92\]{scale:.92}.video-smooth{backface-visibility:hidden;image-rendering:-webkit-optimize-quality;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0) scale(1)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[1fr_auto_auto\]{grid-template-columns:1fr auto auto}.grid-cols-\[repeat\(2\,auto\)\]{grid-template-columns:repeat(2,auto)}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-0{gap:calc(var(--spacing)*0)}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-\[1\.5px\]{gap:1.5px}.gap-\[2\.5px\]{gap:2.5px}.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}.gap-g0\.5{gap:var(--spacing-g0\.5)}.gap-g0\.75{gap:var(--spacing-g0\.75)}.gap-g1{gap:var(--spacing-g1)}.gap-g1\.5{gap:var(--spacing-g1\.5)}.gap-px{gap:1px}.gap-v2{gap:var(--spacing-v2)}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-\[1px\]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px*var(--tw-space-y-reverse));margin-block-end:calc(1px*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-\[3px\]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(3px*var(--tw-space-y-reverse));margin-block-end:calc(3px*calc(1 - var(--tw-space-y-reverse)))}.gap-x-1\.5{column-gap:calc(var(--spacing)*1.5)}.gap-x-g1{column-gap:var(--spacing-g1)}.gap-y-1{row-gap:calc(var(--spacing)*1)}.gap-y-v2{row-gap:var(--spacing-v2)}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.\!rounded-none{border-radius:0!important}.rounded{border-radius:.25rem}.rounded-\[1px\]{border-radius:1px}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[var\(--radius-lg\)\]{border-radius:var(--radius-lg)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-l-\[2px\]{border-top-left-radius:2px;border-bottom-left-radius:2px}.rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.rounded-r-\[2px\]{border-top-right-radius:2px;border-bottom-right-radius:2px}.rounded-b-\[10px\]{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.rounded-bl-\[3px\]{border-bottom-left-radius:3px}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.start-hero-media:after{border-color:var(--color-theme-border-02)}[data-theme=dark] .start-hero-media:after{border-color:var(--color-theme-border-02)}.border-theme-border{border-color:var(--color-theme-border)}.border-theme-border-02{border-color:var(--color-theme-border-02)}.border-theme-card-hex{border-color:var(--color-theme-card-hex)}.border-white\/25{border-color:#ffffff40}@supports (color:color-mix(in lab,red,red)){.border-white\/25{border-color:color-mix(in oklab,var(--color-white) 25%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/15{background-color:#00000026}@supports (color:color-mix(in lab,red,red)){.bg-black\/15{background-color:color-mix(in oklab,var(--color-black) 15%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-black\/\[0\.06\]{background-color:#0000000f}@supports (color:color-mix(in lab,red,red)){.bg-black\/\[0\.06\]{background-color:color-mix(in oklab,var(--color-black) 6%,transparent)}}.bg-theme-bg{background-color:var(--color-theme-bg)}.bg-theme-border-02{background-color:var(--color-theme-border-02)}.bg-theme-card-02-hex{background-color:var(--color-theme-card-02-hex)}.bg-theme-card-03-hex{background-color:var(--color-theme-card-03-hex)}.bg-theme-card-04-hex{background-color:var(--color-theme-card-04-hex)}.bg-theme-card-hex{background-color:var(--color-theme-card-hex)}.bg-theme-card-hover-hex{background-color:var(--color-theme-card-hover-hex)}.bg-theme-fg-10{background-color:var(--color-theme-fg-10)}.bg-theme-fg-20{background-color:var(--color-theme-fg-20)}.bg-theme-product-chrome{background-color:var(--color-theme-product-chrome)}.bg-theme-product-editor{background-color:var(--color-theme-product-editor)}.bg-theme-text{background-color:var(--color-theme-text)}.bg-theme-text\/30{background-color:#26251e4d}@supports (color:color-mix(in lab,red,red)){.bg-theme-text\/30{background-color:color-mix(in oklab,var(--color-theme-text) 30%,transparent)}}.bg-transparent{background-color:#0000}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab,red,red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-theme-product-chrome{--tw-gradient-from:var(--color-theme-product-chrome);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-1{padding:calc(var(--spacing)*1)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-\[2px\]{padding:2px}.p-\[3px\]{padding:3px}.p-\[4px\]{padding:4px}.p-\[5px\]{padding:5px}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-\[1\.5px\]{padding-inline:1.5px}.px-\[3px\]{padding-inline:3px}.px-\[4px\]{padding-inline:4px}.px-\[5px\]{padding-inline:5px}.px-g0\.75{padding-inline:var(--spacing-g0\.75)}.px-g1\.5{padding-inline:var(--spacing-g1\.5)}.px-g2{padding-inline:var(--spacing-g2)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-0\.75{padding-block:calc(var(--spacing)*.75)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.py-\[1\.5px\]{padding-block:1.5px}.py-g0\.75{padding-block:var(--spacing-g0\.75)}.py-v2\.5\/12{padding-block:var(--spacing-v2\.5\/12)}.pt-0{padding-top:calc(var(--spacing)*0)}.pt-0\.5{padding-top:calc(var(--spacing)*.5)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-1\.5{padding-top:calc(var(--spacing)*1.5)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-2\.5{padding-top:calc(var(--spacing)*2.5)}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-\[1px\]{padding-top:1px}.pt-\[3px\]{padding-top:3px}.pt-\[5px\]{padding-top:5px}.pt-\[6px\]{padding-top:6px}.pt-\[var\(--site-header-height\)\]{padding-top:var(--site-header-height)}.pt-g1\.75{padding-top:var(--spacing-g1\.75)}.pt-v3{padding-top:var(--spacing-v3)}.pt-v3\/12{padding-top:var(--spacing-v3\/12)}.pr-1\.5{padding-right:calc(var(--spacing)*1.5)}.pb-0{padding-bottom:calc(var(--spacing)*0)}.pb-0\.5{padding-bottom:calc(var(--spacing)*.5)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-1\.5{padding-bottom:calc(var(--spacing)*1.5)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-\[2px\]{padding-bottom:2px}.pb-v1\.5{padding-bottom:var(--spacing-v1\.5)}.pb-v2\.5\/12{padding-bottom:var(--spacing-v2\.5\/12)}.pb-v3{padding-bottom:var(--spacing-v3)}.pl-2{padding-left:calc(var(--spacing)*2)}.pl-2\.5{padding-left:calc(var(--spacing)*2.5)}.text-center{text-align:center}.text-left{text-align:left}.align-baseline{vertical-align:baseline}.type-slack-sm-semibold{line-height:var(--leading-product-sm);letter-spacing:var(--tracking-product-sm);font-weight:var(--font-weight-semibold);font-family:inherit;font-size:var(--text-slack-sm)}.type-slack-sm{line-height:var(--leading-product-sm);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-product-sm);font-family:inherit;font-size:var(--text-slack-sm)}.type-product-sm{font-family:var(--font-system);font-size:var(--text-product-sm);line-height:var(--leading-product-sm);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-product-sm)}.type-sm{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-sm)}.type-slack-base-semibold{line-height:var(--leading-product-base);font-weight:var(--font-weight-semibold);font-family:inherit;font-size:var(--text-slack-base)}.type-slack-lg-semibold{font-family:inherit}.type-slack-base{line-height:var(--leading-product-base);font-weight:var(--font-weight-normal);font-family:inherit;font-size:var(--text-slack-base)}.type-product-base{font-family:var(--font-system);font-size:var(--text-product-base);line-height:var(--leading-product-base);font-weight:var(--font-weight-normal)}.type-product-lg{font-family:var(--font-system);font-size:var(--text-product-lg);line-height:var(--leading-product-base);font-weight:var(--font-weight-normal)}.type-base{font-size:var(--text-base);line-height:var(--leading-normal);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-base)}.type-lg{font-size:var(--text-lg);line-height:var(--leading-xsnug);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-lg)}.type-md-lg{font-size:var(--text-md-lg);line-height:var(--leading-snug);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-md-lg)}.type-xl{font-size:var(--text-xl);line-height:var(--leading-2xsnug);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-xl)}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.\!leading-none{--tw-leading:1!important;line-height:1!important}.leading-\[1\.8\]{--tw-leading:1.8;line-height:1.8}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.whitespace-nowrap{white-space:nowrap}.text-theme-product-ansi-green{color:var(--color-theme-product-ansi-green)}.text-theme-product-ansi-red{color:var(--color-theme-product-ansi-red)}.text-theme-text{color:var(--color-theme-text)}.text-theme-text-sec{color:var(--color-theme-text-sec)}.text-theme-text-tertiary{color:var(--color-theme-text-tertiary)}.text-theme-text\/25{color:#26251e40}@supports (color:color-mix(in lab,red,red)){.text-theme-text\/25{color:color-mix(in oklab,var(--color-theme-text) 25%,transparent)}}.text-theme-text\/45{color:#26251e73}@supports (color:color-mix(in lab,red,red)){.text-theme-text\/45{color:color-mix(in oklab,var(--color-theme-text) 45%,transparent)}}.text-theme-text\/60{color:#26251e99}@supports (color:color-mix(in lab,red,red)){.text-theme-text\/60{color:color-mix(in oklab,var(--color-theme-text) 60%,transparent)}}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.logo-monochrome:hover{opacity:1}.opacity-0{opacity:0}.opacity-15{opacity:.15}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-45{opacity:.45}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-85{opacity:.85}.opacity-100{opacity:1}.opacity-\[0\.65\]{opacity:.65}.shadow-\[var\(--shadow-flyout\)\]{--tw-shadow:var(--shadow-flyout);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-white\/10{--tw-ring-color:#ffffff1a}@supports (color:color-mix(in lab,red,red)){.ring-white\/10{--tw-ring-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.drop-shadow-\[0_0\.5px_1px_rgba\(0\,0\,0\,0\.3\)\]{--tw-drop-shadow-size:drop-shadow(0 .5px 1px var(--tw-drop-shadow-color,#0000004d));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-\[6px\]{--tw-backdrop-blur:blur(6px)}.backdrop-blur-\[8px\]{--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-saturate-150{--tw-backdrop-saturate:saturate(150%);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[scrollbar-width\:none\]{scrollbar-width:none}@media (hover:hover){.group-hover\:pointer-events-auto:is(:where(.group):hover *){pointer-events:auto}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:scale-\[1\.02\]:is(:where(.group):hover *){scale:1.02}.group-hover\:bg-theme-card-02-hex:is(:where(.group):hover *){background-color:var(--color-theme-card-02-hex)}.group-hover\:text-theme-accent:is(:where(.group):hover *){color:var(--color-theme-accent)}.group-hover\:text-theme-text:is(:where(.group):hover *){color:var(--color-theme-text)}.group-hover\:text-theme-text-sec:is(:where(.group):hover *){color:var(--color-theme-text-sec)}.group-hover\:opacity-60:is(:where(.group):hover *){opacity:.6}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/add-tool\:bg-theme-card-hover-hex:is(:where(.group\/add-tool):hover *),.group-hover\/add-trigger\:bg-theme-card-hover-hex:is(:where(.group\/add-trigger):hover *){background-color:var(--color-theme-card-hover-hex)}.group-hover\/added\:opacity-100:is(:where(.group\/added):hover *){opacity:1}.group-hover\/agent\:bg-\[\#3b82f6\]:is(:where(.group\/agent):hover *){background-color:#3b82f6}.group-hover\/agent\:text-theme-product-ansi-green:is(:where(.group\/agent):hover *){color:var(--color-theme-product-ansi-green)}.group-hover\/agent\:text-theme-text:is(:where(.group\/agent):hover *){color:var(--color-theme-text)}.group-hover\/agent\:opacity-100:is(:where(.group\/agent):hover *){opacity:1}.group-hover\/copy\:text-theme-text-sec:is(:where(.group\/copy):hover *){color:var(--color-theme-text-sec)}.group-hover\/desktop\:scale-105:is(:where(.group\/desktop):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\/desktop\:scale-110:is(:where(.group\/desktop):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\/desktop\:bg-black\/60:is(:where(.group\/desktop):hover *){background-color:#0009}@supports (color:color-mix(in lab,red,red)){.group-hover\/desktop\:bg-black\/60:is(:where(.group\/desktop):hover *){background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.group-hover\/desktop\:opacity-100:is(:where(.group\/desktop):hover *){opacity:1}.group-hover\/event-title\:text-theme-accent:is(:where(.group\/event-title):hover *){color:var(--color-theme-accent)}.group-hover\/link\:translate-x-0\.5:is(:where(.group\/link):hover *){--tw-translate-x:calc(var(--spacing)*.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:-translate-y-0\.5:is(:where(.group\/link):hover *){--tw-translate-y:calc(var(--spacing)*-.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/mobile-loop\:scale-100:is(:where(.group\/mobile-loop):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\/mobile-loop\:opacity-100:is(:where(.group\/mobile-loop):hover *){opacity:1}.group-hover\/pill\:bg-theme-fg-15:is(:where(.group\/pill):hover *){background-color:var(--color-theme-fg-15)}.group-hover\/rec\:scale-110:is(:where(.group\/rec):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\/rec\:opacity-100:is(:where(.group\/rec):hover *){opacity:1}.group-hover\/row\:opacity-0:is(:where(.group\/row):hover *){opacity:0}.group-hover\/row\:opacity-100:is(:where(.group\/row):hover *),.group-hover\/tab\:opacity-100:is(:where(.group\/tab):hover *),.group-hover\/trigger-row\:opacity-100:is(:where(.group\/trigger-row):hover *){opacity:1}}.selection\:bg-theme-text\! ::selection{background-color:var(--color-theme-text)!important}.selection\:bg-theme-text\!::selection{background-color:var(--color-theme-text)!important}.selection\:text-theme-bg\! ::selection{color:var(--color-theme-bg)!important}.selection\:text-theme-bg\!::selection{color:var(--color-theme-bg)!important}.placeholder\:text-base::placeholder{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.placeholder\:text-sm::placeholder{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.placeholder\:text-\[color\:var\(--mobile-phone-placeholder\)\]::placeholder{color:var(--mobile-phone-placeholder)}.placeholder\:text-\[color\:var\(--visual-feedback-number-text\)\]::placeholder{color:var(--visual-feedback-number-text)}.placeholder\:text-\[var\(--color-theme-text-mid\)\]::placeholder{color:var(--color-theme-text-mid)}.placeholder\:text-neutral-500\!::placeholder{color:var(--color-neutral-500)!important}.placeholder\:text-theme-text::placeholder{color:var(--color-theme-text)}.placeholder\:text-theme-text-sec::placeholder{color:var(--color-theme-text-sec)}.placeholder\:opacity-60::placeholder{opacity:.6}.placeholder\:opacity-100::placeholder{opacity:1}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:calc(var(--spacing)*0)}.before\:bottom-0:before{content:var(--tw-content);bottom:calc(var(--spacing)*0)}.before\:left-0:before{content:var(--tw-content);left:calc(var(--spacing)*0)}.before\:hidden:before{content:var(--tw-content);display:none}.before\:w-0\.5:before{content:var(--tw-content);width:calc(var(--spacing)*.5)}.before\:rounded-lg:before{content:var(--tw-content);border-radius:var(--radius-lg)}.before\:bg-theme-border-02:before{content:var(--tw-content);background-color:var(--color-theme-border-02)}.before\:transition-colors:before{content:var(--tw-content);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.before\:duration-\[var\(--duration\)\]:before{content:var(--tw-content);--tw-duration:var(--duration);transition-duration:var(--duration)}.before\:ease-\[var\(--ease-out-spring\)\]:before{content:var(--tw-content);--tw-ease:var(--ease-out-spring);transition-timing-function:var(--ease-out-spring)}.after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-\[-0\.5rem\]:after{content:var(--tw-content);inset:-.5rem}.after\:inset-\[-4px\]:after{content:var(--tw-content);inset:-4px}.after\:right-0:after{content:var(--tw-content);right:calc(var(--spacing)*0)}.after\:bottom-0:after{content:var(--tw-content);bottom:calc(var(--spacing)*0)}.after\:left-0:after{content:var(--tw-content);left:calc(var(--spacing)*0)}.after\:h-px:after{content:var(--tw-content);height:1px}.after\:rounded-\[22px\]:after{content:var(--tw-content);border-radius:22px}.after\:rounded-\[23px\]:after{content:var(--tw-content);border-radius:23px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:border-\[color\:var\(--visual-feedback-selected-border\)\]:after{content:var(--tw-content);border-color:var(--visual-feedback-selected-border)}.after\:bg-theme-product-editor:after{content:var(--tw-content);background-color:var(--color-theme-product-editor)}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.first\:ml-0:first-child{margin-left:calc(var(--spacing)*0)}.first\:pt-0:first-child{padding-top:calc(var(--spacing)*0)}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-1:focus-within{z-index:1}.focus-within\:w-\[15rem\]:focus-within{width:15rem}.focus-within\:max-w-\[15rem\]:focus-within{max-width:15rem}.focus-within\:border-theme-border:focus-within{border-color:var(--color-theme-border)}.focus-within\:border-theme-fg:focus-within{border-color:var(--color-theme-fg)}.focus-within\:bg-theme-card-01-hex:focus-within{background-color:var(--color-theme-card-01-hex)}.focus-within\:bg-theme-product-editor:focus-within{background-color:var(--color-theme-product-editor)}@media (hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-red-500:hover{border-color:var(--color-red-500)}.hover\:border-theme-border:hover{border-color:var(--color-theme-border)}.hover\:border-theme-border-01:hover{border-color:var(--color-theme-border-01)}.hover\:border-theme-border-02:hover{border-color:var(--color-theme-border-02)}.hover\:border-theme-border-02-5:hover{border-color:var(--color-theme-border-02-5)}.hover\:border-theme-border-02\/40:hover{border-color:color-mix(in srgb,--alpha(var(--color-theme-fg)/10%) 40%,transparent)}@supports (color:color-mix(in lab,red,red)){.hover\:border-theme-border-02\/40:hover{border-color:color-mix(in oklab,var(--color-theme-border-02) 40%,transparent)}}.hover\:border-theme-text-sec:hover{border-color:var(--color-theme-text-sec)}.hover\:border-theme-text-tertiary:hover{border-color:var(--color-theme-text-tertiary)}.hover\:\!bg-theme-card-01-hex:hover{background-color:var(--color-theme-card-01-hex)!important}.hover\:\!bg-theme-card-03-hex:hover{background-color:var(--color-theme-card-03-hex)!important}.hover\:\!bg-theme-card-hex:hover{background-color:var(--color-theme-card-hex)!important}.hover\:bg-\[\#15692d\]:hover{background-color:#15692d}.hover\:bg-black\/60:hover{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.hover\:bg-black\/60:hover{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-neutral-800:hover{background-color:var(--color-neutral-800)}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:bg-red-600\/90:hover{background-color:#e40014e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-red-600\/90:hover{background-color:color-mix(in oklab,var(--color-red-600) 90%,transparent)}}.hover\:bg-theme-accent\/90:hover{background-color:#f54e00e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-theme-accent\/90:hover{background-color:color-mix(in oklab,var(--color-theme-accent) 90%,transparent)}}.hover\:bg-theme-button-hover-bg:hover{background-color:var(--color-theme-button-hover-bg)}.hover\:bg-theme-card-01-hex:hover{background-color:var(--color-theme-card-01-hex)}.hover\:bg-theme-card-02-hex:hover{background-color:var(--color-theme-card-02-hex)}.hover\:bg-theme-card-02-hex\/60:hover{background-color:#ebeae599}@supports (color:color-mix(in lab,red,red)){.hover\:bg-theme-card-02-hex\/60:hover{background-color:color-mix(in oklab,var(--color-theme-card-02-hex) 60%,transparent)}}.hover\:bg-theme-card-03-hex:hover{background-color:var(--color-theme-card-03-hex)}.hover\:bg-theme-card-04-hex:hover{background-color:var(--color-theme-card-04-hex)}.hover\:bg-theme-card-hex:hover{background-color:var(--color-theme-card-hex)}.hover\:bg-theme-card-hover-hex:hover{background-color:var(--color-theme-card-hover-hex)}.hover\:bg-theme-card-hover-hex\/40:hover{background-color:#ebeae566}@supports (color:color-mix(in lab,red,red)){.hover\:bg-theme-card-hover-hex\/40:hover{background-color:color-mix(in oklab,var(--color-theme-card-hover-hex) 40%,transparent)}}.hover\:bg-theme-card-hover-hex\/60:hover{background-color:#ebeae599}@supports (color:color-mix(in lab,red,red)){.hover\:bg-theme-card-hover-hex\/60:hover{background-color:color-mix(in oklab,var(--color-theme-card-hover-hex) 60%,transparent)}}.hover\:bg-theme-text\/\[0\.04\]:hover{background-color:#26251e0a}@supports (color:color-mix(in lab,red,red)){.hover\:bg-theme-text\/\[0\.04\]:hover{background-color:color-mix(in oklab,var(--color-theme-text) 4%,transparent)}}.hover\:bg-white\!:hover{background-color:var(--color-white)!important}.hover\:\[color\:--alpha\(var\(--color-theme-fg\)\/75\%\)\]:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.hover\:\[color\:--alpha\(var\(--color-theme-fg\)\/75\%\)\]:hover{color:color-mix(in oklab,var(--color-theme-fg) 75%,transparent)}}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-theme-accent:hover{color:var(--color-theme-accent)}.hover\:text-theme-accent\/80:hover{color:#f54e00cc}@supports (color:color-mix(in lab,red,red)){.hover\:text-theme-accent\/80:hover{color:color-mix(in oklab,var(--color-theme-accent) 80%,transparent)}}.hover\:text-theme-text:hover{color:var(--color-theme-text)}.hover\:text-theme-text-sec:hover{color:var(--color-theme-text-sec)}.hover\:text-theme-text\/75:hover{color:#26251ebf}@supports (color:color-mix(in lab,red,red)){.hover\:text-theme-text\/75:hover{color:color-mix(in oklab,var(--color-theme-text) 75%,transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:no-underline:hover{text-decoration-line:none}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-current:hover{text-decoration-color:currentColor}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:\[border-color\:var\(--color-theme-fg\)\]:focus{border-color:var(--color-theme-fg)}.focus\:\!bg-theme-card-01-hex:focus{background-color:var(--color-theme-card-01-hex)!important}.focus\:bg-theme-card-hover-hex:focus{background-color:var(--color-theme-card-hover-hex)}.focus\:bg-white\!:focus{background-color:var(--color-white)!important}.focus\:opacity-100:focus{opacity:1}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-\[var\(--color-theme-accent\)\]:focus{--tw-ring-color:var(--color-theme-accent)}.focus\:ring-theme-fg:focus{--tw-ring-color:var(--color-theme-fg)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:pointer-events-auto:focus-visible{pointer-events:auto}.focus-visible\:text-theme-accent:focus-visible{color:var(--color-theme-accent)}.focus-visible\:text-theme-text:focus-visible{color:var(--color-theme-text)}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-theme-text\/20:focus-visible{--tw-ring-color:#26251e33}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-theme-text\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--color-theme-text) 20%,transparent)}}.focus-visible\:focus-visible:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-indigo-600:focus-visible{outline-color:var(--color-indigo-600)}.focus-visible\:outline-theme-accent:focus-visible{outline-color:var(--color-theme-accent)}.focus-visible\:outline-theme-border-03:focus-visible{outline-color:var(--color-theme-border-03)}.focus-visible\:outline-theme-button-bg:focus-visible{outline-color:var(--color-theme-button-bg)}.focus-visible\:outline-theme-fg:focus-visible{outline-color:var(--color-theme-fg)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:cursor-grabbing:active{cursor:grabbing}.active\:\!bg-theme-card-02-hex:active{background-color:var(--color-theme-card-02-hex)!important}.active\:text-theme-text:active{color:var(--color-theme-text)}.active\:text-theme-text-mid:active{color:var(--color-theme-text-mid)}.active\:text-theme-text-sec:active{color:var(--color-theme-text-sec)}.data-\[hidden\]\:invisible[data-hidden]{visibility:hidden}@media (hover:hover){.data-\[interactive\]\:hover\:bg-theme-card-hover-hex[data-interactive]:hover{background-color:var(--color-theme-card-hover-hex)}}@media not all and (min-width:1140px){.max-xl\:hidden{display:none}.max-xl\:pt-0{padding-top:calc(var(--spacing)*0)}}@media not all and (min-width:767px){.max-\[767px\]\:pointer-events-none{pointer-events:none}.max-\[767px\]\:opacity-0{opacity:0}}@media not all and (min-width:420px){.max-sm\:hidden{display:none}:where(.max-sm\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.max-sm\:px-4{padding-inline:calc(var(--spacing)*4)}.max-sm\:py-3{padding-block:calc(var(--spacing)*3)}}@media (min-width:420px){.sm\:aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.sm\:aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.sm\:aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.sm\:aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.sm\:aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.sm\:aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.sm\:aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.sm\:aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.sm\:aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}.sm\:h-\[2\.25rem\]{height:2.25rem}.sm\:h-\[4\.5rem\]{height:4.5rem}.sm\:w-\[220px\]{width:220px}.sm\:type-2xl{font-size:var(--text-2xl);line-height:var(--leading-tight);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-2xl)}@media (hover:hover){.sm\:group-hover\:pointer-events-auto:is(:where(.group):hover *){pointer-events:auto}.sm\:group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.sm\:focus-visible\:pointer-events-auto:focus-visible{pointer-events:auto}.sm\:focus-visible\:opacity-100:focus-visible{opacity:1}}@media (min-width:630px){.min-\[630px\]\:flex{display:flex}}@media (min-width:660px){.md\:aspect-1\/1-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}.md\:aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.md\:aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.md\:aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.md\:aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.md\:aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.md\:aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.md\:aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.md\:aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.md\:aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}.md\:right-0{right:calc(var(--spacing)*0)}.md\:left-auto{left:auto}.md\:col-start-1{grid-column-start:1}.md\:col-start-7{grid-column-start:7}.md\:col-end-7{grid-column-end:7}.md\:col-end-25{grid-column-end:25}.md\:h-\[2\.5rem\]{height:2.5rem}.md\:h-\[6\.25rem\]{height:6.25rem}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:pb-g3{padding-bottom:var(--spacing-g3)}.md\:type-sm{font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);font-weight:var(--font-weight-normal);letter-spacing:var(--tracking-sm)}.md\:group-focus-within\:pointer-events-auto:is(:where(.group):focus-within *){pointer-events:auto}.md\:group-focus-within\:opacity-100:is(:where(.group):focus-within *){opacity:1}.md\:group-focus-within\/item\:pointer-events-auto:is(:where(.group\/item):focus-within *){pointer-events:auto}.md\:group-focus-within\/item\:opacity-100:is(:where(.group\/item):focus-within *){opacity:1}@media (hover:hover){.md\:group-hover\:pointer-events-auto:is(:where(.group):hover *){pointer-events:auto}.md\:group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.md\:group-hover\/item\:pointer-events-auto:is(:where(.group\/item):hover *){pointer-events:auto}.md\:group-hover\/item\:opacity-100:is(:where(.group\/item):hover *){opacity:1}}.md\:focus-visible\:pointer-events-auto:focus-visible{pointer-events:auto}.md\:focus-visible\:opacity-100:focus-visible{opacity:1}@media not all and (min-width:1139px){.min-\[660px\]\:max-\[1139px\]\:aspect-auto{aspect-ratio:auto}.min-\[660px\]\:max-\[1139px\]\:h-full{height:100%}}}@media (min-width:900px){.lg\:aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.lg\:aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.lg\:aspect-3\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:33.3333%}.lg\:aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.lg\:aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.lg\:aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.lg\:aspect-5\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:40%}.lg\:aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.lg\:aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.lg\:aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.lg\:aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-3{grid-column-start:3}.lg\:col-start-9{grid-column-start:9}.lg\:col-end-9{grid-column-end:9}.lg\:col-end-25{grid-column-end:25}.lg\:col-end-\[-1\]{grid-column-end:-1}.lg\:mb-0{margin-bottom:calc(var(--spacing)*0)}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:inline-flex{display:inline-flex}.lg\:w-\[95\.75px\]{width:95.75px}.lg\:grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}@media (hover:hover){.lg\:group-hover\/item\:opacity-100:is(:where(.group\/item):hover *){opacity:1}}}@media (min-width:1140px){.xl\:aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.xl\:aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.xl\:aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.xl\:aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.xl\:aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.xl\:aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.xl\:aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.xl\:aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.xl\:aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}.xl\:left-6{left:calc(var(--spacing)*6)}.xl\:col-start-1{grid-column-start:1}.xl\:col-start-7{grid-column-start:7}.xl\:col-end-7{grid-column-end:7}.xl\:col-end-19{grid-column-end:19}.min-\[1140px\]\:mx-0{margin-inline:calc(var(--spacing)*0)}.xl\:block{display:block}.xl\:hidden{display:none}.xl\:inline{display:inline}.xl\:max-w-\[520px\]{max-width:520px}.xl\:translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x) var(--tw-translate-y)}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.min-\[1140px\]\:justify-start{justify-content:flex-start}.xl\:justify-end{justify-content:flex-end}.xl\:overflow-visible{overflow:visible}.xl\:pr-8{padding-right:calc(var(--spacing)*8)}}@media (min-width:1380px){.\32 xl\:aspect-1\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:100%}.\32 xl\:aspect-2\/1-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:50%}.\32 xl\:aspect-3\/2-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:66.6667%}.\32 xl\:aspect-4\/3-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:75%}.\32 xl\:aspect-4\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:125%}.\32 xl\:aspect-5\/4-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:80%}.\32 xl\:aspect-8\/5-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:62.5%}.\32 xl\:aspect-16\/9-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:56.25%}.\32 xl\:aspect-natural-box:after{content:"";pointer-events:none;grid-area:1/1/-1/-1;padding-top:0}}@container (min-width:24rem){.\@sm\:col-start-1{grid-column-start:1}.\@sm\:col-end-2{grid-column-end:2}}@media (prefers-color-scheme:dark){@media (hover:hover){.dark\:hover\:bg-\[\#1f7530\]:hover{background-color:#1f7530}.dark\:hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.dark\:hover\:bg-gray-800:hover{background-color:var(--color-gray-800)}}}@media (pointer:fine){@media (hover:hover){.pointer-fine\:group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}}.\[\&_\*\]\:\!h-\[8px\] *{height:8px!important}.\[\&_\*\]\:\!h-\[11px\] *{height:11px!important}.\[\&_\*\]\:\!w-\[8px\] *{width:8px!important}.\[\&_\*\]\:\!w-\[11px\] *{width:11px!important}.\[\&_\*\]\:\!text-\[8px\] *{font-size:8px!important}.\[\&_\*\]\:\!text-\[11px\] *{font-size:11px!important}.\[\&_\:\:selection\]\:bg-theme-bg ::selection{background-color:var(--color-theme-bg)}.\[\&_\:\:selection\]\:text-theme-text ::selection{color:var(--color-theme-text)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button{appearance:none}.\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration{appearance:none}.\[\&\:\:-webkit-search-results-button\]\:appearance-none::-webkit-search-results-button{appearance:none}.\[\&\:\:-webkit-search-results-decoration\]\:appearance-none::-webkit-search-results-decoration{appearance:none}.\[\&\:\:after\]\:border-theme-border-02:after{border-color:var(--color-theme-border-02)}.\[\&\:\:before\]\:border-theme-border-01-5:before{border-color:var(--color-theme-border-01-5)}.thin-scrollbar::-webkit-scrollbar{width:8px;height:8px}.thin-scrollbar::-webkit-scrollbar-track{background:0 0}.thin-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-theme-fg-20);background-clip:padding-box;border:2px solid #0000;border-radius:50%}.thin-scrollbar::-webkit-scrollbar-corner{background:0 0}.no-scrollbar::-webkit-scrollbar{display:none}.container{max-width:var(--max-width-container);width:100%;margin-inline:auto}@keyframes shimmer{0%{background-position:200%0}to{background-position:-200%0}}@keyframes shimmer-slide{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes mobile-chat-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes mobile-interaction-pulse{0%,to{opacity:.08;box-shadow:inset 0 0 0 1px rgb(var(--mobile-interaction-color)/.22),inset 0 0 8px rgb(var(--mobile-interaction-color)/.08)}50%{opacity:.2;box-shadow:inset 0 0 0 1px rgb(var(--mobile-interaction-color)/.52),inset 0 0 12px rgb(var(--mobile-interaction-color)/.24)}}@keyframes mobile-interaction-glow{0%,to{outline-color:rgb(var(--mobile-interaction-color)/.08);outline-offset:0;filter:drop-shadow(0 1px 2px rgb(0 0 0/var(--mobile-interaction-shadow-opacity-rest))) drop-shadow(0 0 0 rgb(var(--mobile-interaction-color)/0))}50%{outline-color:rgb(var(--mobile-interaction-color)/.2);outline-offset:2px;filter:drop-shadow(0 3px 5px rgb(0 0 0/var(--mobile-interaction-shadow-opacity-peak))) drop-shadow(0 0 5px rgb(var(--mobile-interaction-color)/.2))}}@keyframes mobile-workspace-interaction-pulse{0%,to{box-shadow:0 0 0 1px rgb(var(--mobile-interaction-accent-color)/.24);transform:scale(1)}50%{box-shadow:0 0 0 6px rgb(var(--mobile-interaction-accent-color)/0);transform:scale(1.24)}}.mobile-interaction-pulse[data-interaction-pulse]:after{content:"";pointer-events:none;z-index:40;border-radius:inherit;background:radial-gradient(circle at 50% 28%,rgb(var(--mobile-interaction-gradient-color)/.58),rgb(var(--mobile-interaction-gradient-color)/.16) 48%,transparent 76%);will-change:opacity,box-shadow;animation:2.8s ease-in-out infinite mobile-interaction-pulse;position:absolute;inset:0}.mobile-interaction-pulse--workspace-row[data-interaction-pulse]:after{display:none}@media (prefers-reduced-motion:reduce){.mobile-interaction-pulse[data-interaction-pulse]:after{opacity:.15;animation:none}}@keyframes mobileWorkingVerticalOpacity{0%,to{opacity:.72}20%{opacity:.28}40%{opacity:.72}60%,80%{opacity:.28}}@keyframes mobileWorkingHorizontalOpacity{0%,to{opacity:.72}20%,40%{opacity:.28}60%{opacity:.72}80%{opacity:.28}}@keyframes mobileWorkingCenterOpacity{0%,40%,60%,to{opacity:.18}20%,80%{opacity:.64}}@keyframes mobileRecordingWaveform{0%{transform:scaleY(var(--waveform-min))}50%{transform:scaleY(var(--waveform-mid))}to{transform:scaleY(var(--waveform-end))}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes streaming-word-fade{0%{opacity:.4}to{opacity:1}}.shimmer{--shimmer-base-color:var(--shimmer-color,var(--color-theme-text-sec));--shimmer-highlight-color:#26251e}@supports (color:color-mix(in lab,red,red)){.shimmer{--shimmer-highlight-color:color-mix(in srgb,var(--color-theme-text) var(--shimmer-intensity,70%),var(--shimmer-base-color))}}.shimmer{background-image:linear-gradient(90deg,var(--shimmer-base-color) 0%,var(--shimmer-base-color) 30%,var(--shimmer-highlight-color) 55%,var(--shimmer-base-color) 70%,var(--shimmer-base-color) 100%);-webkit-text-fill-color:transparent;animation:shimmer var(--shimmer-duration,2.5s) linear infinite;background-size:200% 100%;-webkit-background-clip:text;background-clip:text}}.katex .katex-version:after{content:"0.16.39"}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .eqn-num:before{content:"("counter(katexEqnNo)")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"("counter(mmlEqnNo)")";counter-increment:mmlEqnNo}body{counter-reset:katexEqnNo mmlEqnNo}@keyframes newsletter-submit-pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes gallery-marquee-item-slide-up{0%{opacity:0;transform:translateY(25%)}to{opacity:1;transform:translate(0)}}@media (min-width:900px){:root{--button-padding-default:.78em 1.35em .8em;--button-padding-md-sm:.6em 1.25em .62em;--button-padding-sm:.4em .75em .42em;--button-padding-xs:.15em .5em;--site-header-height:52px}}.no-drag-img img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.font-feature-case{font-feature-settings:"case"1}pre:has(.katex):before{display:none}pre:has(.katex-display):before{display:none}.mobile-app-qr-link:focus-visible{outline:2px solid var(--color-theme-fg);outline-offset:.3ch}@view-transition{navigation:none}::view-transition-old(root){animation-duration:0s}::view-transition-new(root){animation-duration:0s}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-border-spacing-x{syntax:"<length>";inherits:false;initial-value:0}@property --tw-border-spacing-y{syntax:"<length>";inherits:false;initial-value:0}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0#0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}

/* ======================================================================
   block 3/7 — font faces
   ====================================================================== */
@font-face{font-family:CursorGothic;src:url(/fonts/8c871be81e3b01ee.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:CursorGothic;src:url(/fonts/a9978131f519749a.woff2)format("woff2");font-weight:400;font-style:italic}@font-face{font-family:CursorGothic Fallback;src:local(Arial);ascent-override:92.76%;descent-override:23.7%;line-gap-override:9.67%;size-adjust:103.38%}.cursorgothic_71ba3fd8-module__Sj65MG__variable{--font-sans:"CursorGothic","CursorGothic Fallback",system-ui,Helvetica Neue,Helvetica,Arial,sans-serif}@font-face{font-family:berkeleyMono;src:url(/fonts/11d9573b6fc17704.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:berkeleyMono;src:url(/fonts/2faa15c4271fa3d5.woff2)format("woff2");font-weight:400;font-style:italic}.berkeleymono_82e21e43-module__aDRXRq__variable{--font-berkeley-mono:"berkeleyMono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.eb_garamond_f923f39e-module__8qwdia__variable{--font-serif:"EB Garamond",Iowan Old Style,Palatino Linotype,URW Palladio L,P052,ui-serif,Georgia,Cambria,Times New Roman,Times,serif}

/* ======================================================================
   block 4/7 — keyframes
   ====================================================================== */
:root{--color-bg:var(--color-theme-bg);--color-text-primary:var(--color-theme-text);--color-text-muted:var(--color-theme-text-sec);--color-text-secondary:var(--color-theme-text-sec);--color-border:var(--color-theme-border-02);--color-accent:var(--color-theme-accent);--color-code-bg:var(--color-theme-card-hex);--color-code-text:var(--color-theme-text);--color-bg-hover:var(--color-theme-card-hover-hex);--color-border-bright:var(--color-theme-border-02-5);--color-success:var(--color-theme-product-ansi-green);--color-success-bg:color-mix(in srgb,var(--color-theme-product-ansi-green) 15%,transparent);--color-error:var(--color-theme-product-ansi-red);--color-error-bg:color-mix(in srgb,var(--color-theme-product-ansi-red) 15%,transparent);--color-warning:var(--color-theme-accent);--color-warning-bg:color-mix(in srgb,var(--color-theme-accent) 15%,transparent);--color-accent-bg:color-mix(in srgb,var(--color-theme-accent) 10%,transparent);--color-accent-bg-strong:color-mix(in srgb,var(--color-theme-accent) 25%,transparent);--color-info:var(--color-theme-border-03);--font-mono:var(--font-berkeley-mono),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--spacing-xs:var(--spacing-g0\.25);--spacing-sm:var(--spacing-g0\.5);--spacing-md:var(--spacing-g1);--spacing-lg:var(--spacing-g1\.5);--spacing-xl:var(--spacing-g2);--spacing-2xl:var(--spacing-g3);--transition-fast:var(--duration);--color-bg-elevated:var(--color-theme-card-hex);--color-timeline-thinking:#dfa88f;--color-timeline-grep:#9fc9a2;--color-timeline-read:#9fbbe0;--color-timeline-edit:#c0a8dd}.prose-column a:hover{opacity:.7}.interactive-chip:focus-visible,.interactive-surface:focus-visible,.candidate-summary-row:focus-visible,.compressed-index:focus-visible,.mmap-compact-row:focus-visible,.suffix-row:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent);outline:none}.text-input:focus,.pattern-input-wrapper:focus-within{border-color:var(--color-accent)}.control-button:hover{background:var(--color-bg-hover);border-color:var(--color-border-bright)}.step-dot:hover:not(.active){background:var(--color-border-bright)}.demo-search-input:focus{border-color:var(--color-accent)}.demo-tab:hover{color:var(--color-text-primary)}.part-button:hover{background:var(--color-bg-hover);border-color:var(--color-accent)}.clear-button:hover{border-color:var(--color-error);color:var(--color-error)}.run-benchmark-btn:hover:not(:disabled){filter:brightness(1.1)}.toggle-btn:hover{color:var(--color-text-primary)}.document-row:hover{border-color:var(--color-border-bright)}.doc-input:hover{border-color:var(--color-border)}.doc-input:focus{background:var(--color-bg);border-color:var(--color-accent)}.trigram-badge-sm:hover{border-color:var(--color-accent);background:var(--color-accent-bg)}.index-entry-compact:hover{background:var(--color-accent-bg)}.search-input-compact:focus{border-color:var(--color-accent)}.search-input-compact::placeholder{color:var(--color-text-muted)}.mode-btn:hover{color:var(--color-text-primary)}.search-input-wrapper:focus-within{border-color:var(--color-accent)}.search-input-wrapper .search-input-compact:focus{border-color:#0000}.select-input:focus{border-color:var(--color-accent)}.mode-toggle-btn:hover:not(.active){color:var(--color-text-secondary)}@keyframes pulse-emit{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.suffix-input:focus{border-color:var(--color-accent)}.suffix-row:hover{background:var(--color-bg-hover)}.suffix-row.in-range:hover{background:color-mix(in srgb,var(--color-success-bg) 80%,var(--color-bg-hover))}.toggle-steps-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.compressed-index:hover{background:var(--color-accent-bg);border-color:var(--color-accent)}.token-position-badge:hover{border-color:var(--color-accent);background:var(--color-accent-bg)}.phrase-index-entry:hover{background:var(--color-accent-bg)}@keyframes pulse-bit{0%{transform:scale(1)}to{transform:scale(1.1)}}.candidate-summary-row:hover{border-color:var(--color-border-bright);background:var(--color-code-bg)}.pattern-link:hover{background:var(--color-accent-bg);border-bottom-style:solid;border-radius:2px}.mmap-compact-row:hover{background:var(--color-accent-bg)}.agent-timeline-toggle-btn:hover{background:var(--color-bg-hover)}.agent-timeline-toggle-btn.is-active:hover{background:var(--color-accent)}

/* ======================================================================
   block 5/7 — sonner toast styles (vendored)
   ====================================================================== */
[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:"";position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:"";position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}

/* ======================================================================
   block 6/7 — SingleFile capture helpers
   ====================================================================== */
.sf-hidden{display:none!important}

/* ======================================================================
   block 7/7 — SingleFile capture helpers
   ====================================================================== */
img[src="data:,"],source[src="data:,"]{display:none!important}
/*
 * /build's hero window, filled — a project's items on the app's timeline
 * layout with phasing on.
 *
 * NOT generated by `pnpm run port`. Hand-maintained, imported by the `cloud`
 * page alone (see `astroPage` in tools/04-generate.mjs) and paired with
 * tools/fragments/schedule-mockup.mjs, which puts the markup inside the
 * captured window frame. Every number below is the app's own value scaled, with
 * the app's number in the comment beside it.
 *
 * WHAT THIS IS
 * ------------
 * Bidlo Lite's **advanced** layout complexity — no global header, no gutters or
 * radii between the three columns, the main region on `--background` rather
 * than `--muted`, the sidebar's four page links a horizontal icon strip — around
 * a project document page whose embedded views app is open on a timeline view.
 * The fragment's header carries the full reasoning; this file carries the
 * measurements.
 *
 * SCALE
 * -----
 * **0.75**, and deliberately not hero-mockup's 0.86. This window's subject is
 * the canvas, the canvas is the one part of it whose usefulness scales with how
 * much fits, and 0.75 buys four whole month columns and fourteen rows where
 * 0.86 buys three and eleven. It is also hero-chat.css's scale, so the site
 * gains no third number. Lengths are the app's value x 0.75 rounded to a whole
 * pixel; hairlines stay 1px, a hairline having no scale; radii are the app's own
 * 4 / 6 / 8 / full, for the reason hero-mockup gives — scaling a 4px corner only
 * softens it.
 *
 * **Type does not follow the scale**, here as in all three sibling windows: it
 * reads the capture's own product ladder (`--text-product-sm` 11 / `-base` 12 /
 * `-lg` 13), which is what keeps every window on this site in one voice. The
 * app's phased strip is `text-[11px]` and this window's small tier is 11px, so
 * that one lands at 1:1 by coincidence rather than by arithmetic.
 *
 * THE THREE WIDTHS THAT HAVE TO AGREE WITH THE FRAGMENT
 * ----------------------------------------------------
 * The fragment computes bar and cell geometry against a canvas of a stated
 * width, so these four numbers are one set:
 *
 *     sidebar               166   (the app's 221, scaled)
 *     the views block       812   = 990 frame - 166 sidebar - 2 x 6 of px-2
 *     the pane              320   = 24 gutter + 176 Name + 120 Bid quantity
 *     the canvas            492   = 812 - 320
 *
 * `PANE_W` and `CANVAS_W` in schedule-mockup.mjs derive the last two from
 * `PANE_COLS`; change a column width there and the numbers below follow, not
 * the other way round.
 *
 * That last number is not free, and it moved on 2026-09-01: dropping the Unit
 * column and widening the quantity one to 120 took the pane 334 -> 320, so the
 * canvas went 478 -> 492 and the board gained a day and a half of October. It
 * still draws three month bands and eight week ticks. Narrow the canvas again
 * and the last tick is what goes first.
 *
 * COLOUR
 * ------
 * The same mapping hero-mockup.css sets out and for the same reason — this
 * window declares its own `--sc-*` set so it follows the site into dark mode,
 * and the surfaces are `--color-theme-bg` / `--color-theme-card-hex` rather
 * than the capture's product-chrome pair, which swap round between themes where
 * the app's `--background` does not. Two additions: `--sc-red` is the app's
 * `--red` converted from oklch (both themes stated, since the app carries a
 * lighter red in dark), and the unit badge tones are the five stored
 * `icon.key`s, restated from items-mockup.css rather than shared — see the fork
 * note in the fragment.
 *
 * THE TRAP
 * --------
 * `src/scripts/empty-mockups.js` finds a window mockup by a container with
 * exactly three small round children and hides that container's siblings. The
 * filled body carries `data-mockup-filled` so the script skips it, and
 * **nothing in here may be a container with exactly three round children of
 * 5-15px** — which is why the presence stack holds two faces and the toolbar's
 * right cluster holds two controls.
 */

.schedule-mockup {
  --sc-surface: var(--color-theme-bg);
  --sc-chrome: var(--color-theme-card-hex);
  --sc-hover: var(--color-theme-card-02-hex);
  --sc-active: var(--color-theme-card-03-hex);
  --sc-line: var(--color-theme-border-02);
  --sc-text: var(--color-theme-product-text);
  --sc-text-sec: var(--color-theme-product-text-sec);
  --sc-text-dim: var(--color-theme-product-text-tertiary);
  --sc-accent: #2483e2;
  --sc-red: #e1584d;
  /* `--popover`, which in light is literally `var(--background)` — a bar is
     separated from the canvas by its outline and its shadow, not by a fill.
     Dark is where the app's own value diverges (oklch(0.26 0 0)), so it is
     stated rather than derived. */
  --sc-bar-fill: var(--sc-surface);

  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--sc-surface);
  color: var(--sc-text);
  font-family: var(--font-system);
  font-size: var(--text-product-base);
  line-height: var(--leading-product-base);
  text-align: left;
  cursor: default;
}

:root[data-theme='dark'] .schedule-mockup {
  --sc-red: #ee685a;
  --sc-bar-fill: #2e2e2e;
}

.schedule-mockup *,
.schedule-mockup *::before,
.schedule-mockup *::after {
  box-sizing: border-box;
}

/* Lucide at the app's own 24 viewBox. `non-scaling-stroke` makes stroke-width
   mean device pixels rather than user units, so 1 is exactly 1px in every box —
   the same reasoning hero-mockup.css sets out at length. It does not inherit,
   so it goes on the shapes. */
.schedule-mockup svg {
  display: block;
  flex: none;
  width: 12px; /* size-4 = 16 */
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.schedule-mockup svg * {
  vector-effect: non-scaling-stroke;
}

.sc-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The secondary tier: things that are *about* the content rather than the
   content — section names, the axis ticks, the phased figures. */
.sc-section,
.sc-tick,
.sc-pcell {
  font-size: var(--text-product-sm);
  line-height: var(--leading-product-sm);
  letter-spacing: var(--tracking-product-sm);
}

/* =========================================================================
   Left rail — the sidebar. Copied from hero-mockup.css with `hm-` renamed;
   the fork rule means a change to one is a deliberate change to both.
   ========================================================================= */

.sc-side {
  width: 166px; /* the app's resizable default, a hair over 200 */
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sc-chrome);
  border-right: 1px solid var(--sc-line);
}

.sc-side-head {
  height: 39px; /* h-13 = 52 */
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.sc-team {
  flex: 1;
  min-width: 0;
  height: 27px; /* h-9 = 36 */
  display: flex;
  align-items: center;
  padding-right: 6px;
  border-radius: 999px;
  font-weight: var(--font-weight-medium);
}

.sc-team-well {
  width: 30px; /* 40 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* An initial is a mark rather than a word: 10px is the app's own `text-[10px]`,
   not 0.75 of it, and its relative `.sc-face` is the same value. */
.sc-avatar {
  width: 15px; /* size-5 = 20 */
  height: 15px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--sc-accent);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* Square ghost icon button — size-8 (32) in the app. */
.sc-icon-btn {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--sc-text-dim);
}

.sc-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 6px;
  font-size: var(--text-product-lg);
}

.sc-nav-item {
  height: 27px; /* h-sidebar-nav-item = 36 under advanced */
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: var(--sc-text-dim);
}

.sc-nav-well {
  width: 27px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-accent);
}

.sc-nav-well svg {
  width: 14px; /* size-4.5 = 18 */
  height: 14px;
}

.sc-nav-item[data-active] {
  padding-right: 8px;
  background: var(--sc-active);
  color: var(--sc-text);
}

.sc-nav-item:not([data-active]) .sc-nav-label {
  display: none;
}

.sc-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 6px;
}

.sc-section {
  height: 24px; /* h-sidebar-item = 32 under advanced */
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--sc-text-dim);
  font-weight: var(--font-weight-medium);
}

.sc-section:not(:first-child) {
  margin-top: 5px;
}

.sc-page {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--sc-text-sec);
}

.sc-page svg {
  width: 12px;
  height: 12px;
  color: var(--sc-text-dim);
}

.sc-side-foot {
  flex: none;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px;
}

.sc-search {
  flex: 1;
  min-width: 0;
  height: 30px; /* h-10 = 40 */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: var(--sc-surface);
  color: var(--sc-text-dim);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.03);
}

.sc-round-btn {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: var(--sc-surface);
  color: var(--sc-text-sec);
}

.sc-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--sc-accent);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* =========================================================================
   Centre column — the main region.
   ========================================================================= */

.sc-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sc-surface);
}

.sc-main-head {
  height: 39px; /* advanced forces 52 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
}

.sc-crumb {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sc-crumb-well {
  width: 27px; /* size-9 = 36 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-crumb-well img {
  width: 15px; /* size-5 = 20 */
  height: 15px;
  border-radius: 4px;
  object-fit: cover;
}

.sc-crumb-title {
  margin-left: -1px;
  padding: 0 6px;
  font-weight: var(--font-weight-medium);
}

.sc-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Two faces, not three — see THE TRAP. */
.sc-faces {
  display: flex;
  align-items: center;
  margin-right: 3px;
}

.sc-face {
  width: 18px; /* size-6 = 24 */
  height: 18px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--sc-surface);
  background: var(--sc-active);
  color: var(--sc-text-sec);
  font-size: 10px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

.sc-face + .sc-face {
  margin-left: -4px;
}

/* =========================================================================
   The document page. Its saved block order is [views, banner, title, notes],
   so the views app leads and the other three follow it off the bottom edge —
   see the fragment's header for why that order and not the shipped one.
   ========================================================================= */

.sc-doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sc-views {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 6px; /* px-2 */
}

.sc-views-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding-top: 3px; /* pt-1 */
  margin-bottom: 6px; /* mb-2 */
  /* The row is as tall as its tallest control, which is the settings trigger
     (size-9 = 36), not the tab. There is no hairline under it and no pb-2:
     both are `actionBarVisible &&` in views/client.tsx, and that preference
     starts off. */
  min-height: 30px;
}

.sc-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

/* 22 = the 30px an unconstrained TabsTrigger actually renders at, scaled — not
   the 36 `getTabTriggerClass` asks for. hero-mockup.css records the
   measurement; this is the same pill one scale down. */
.sc-tab {
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px; /* px-3 */
  border-radius: 999px;
  color: var(--sc-text-sec);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.sc-tab[data-active] {
  background: var(--sc-line); /* bg-foreground/10, which --sc-line already is */
  color: var(--sc-text);
}

/* =========================================================================
   The timeline.
   ========================================================================= */

.sc-tl {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   The date toolbar: h-10, full width, the month bands painted across all of it
   with the two control clusters riding over them on their own opaque ground.
   That is exactly how the app hides the band label that falls behind the pane —
   there is no clipping anywhere, only stacking.
   ------------------------------------------------------------------------- */

.sc-tl-bar {
  position: relative;
  height: 30px; /* h-10 = 40 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 9px; /* pl-3 pr-3 */
  background: var(--sc-surface); /* complexity-advanced-main:bg-background */
}

.sc-bands {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* No separators between bands: the label fades out where its band runs out of
   room rather than being hard-cut. The ramp is the app's own, capped at a third
   of the band so a narrow month still reads. */
.sc-band {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 9px;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
  color: var(--sc-text);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - min(18px, 33%)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - min(18px, 33%)), transparent);
}

.sc-bar-left,
.sc-bar-right {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  align-self: stretch;
  background: var(--sc-surface);
}

.sc-bar-left {
  margin-left: -9px;
  min-width: 0;
}

/* The pane's chrome continues up through the month strip with the collapse
   control right-aligned inside it, and no vertical rule: the pane/canvas
   separator starts at the rows, not in the two header tiers. */
.sc-pane-strip {
  width: 321px; /* PANE_W + the border pixel */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3px;
}

.sc-bar-date {
  margin: 0;
  padding-left: 9px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-product-base);
  font-weight: var(--font-weight-bold);
  color: var(--sc-text);
}

.sc-bar-right {
  margin-right: -9px;
  padding-right: 9px;
  color: var(--sc-text-sec);
}

.sc-zoom {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--sc-text-sec);
}

.sc-today-btn {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--sc-text);
}

/* -------------------------------------------------------------------------
   The scroll viewport: a sticky tick axis, the canvas, and the phased footer.
   The window has no scroll, so what the app achieves with `sticky` is achieved
   here by the three being siblings in a column.
   ------------------------------------------------------------------------- */

.sc-tl-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* THE RULE UNDER THE HEADER RUNS THE FULL WIDTH, at the owner's direction
   2026-09-01. It used to live on `.sc-axis` alone, so it started at the pane's
   right edge and the "Name" / "Bid quantity" header sat on nothing — the first
   body row's own `border-bottom` was the first horizontal line in the pane, so
   the header read as a row of the table rather than as its head. One rule on
   the row itself closes it across both halves. */
.sc-tl-head {
  height: 24px; /* TICK_HEIGHT = 32 */
  flex: none;
  display: flex;
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-line);
}

.sc-pane-head,
.sc-pane,
.sc-foot-pane {
  width: 320px; /* PANE_W — see the note at the top of this file */
  flex: none;
  display: flex;
  align-items: stretch;
}

.sc-gutter {
  width: 24px; /* the table's select gutter, w-8 = 32 */
  flex: none;
}

.sc-col--name {
  width: 176px;
}

/* 120, where the Unit column's 44 used to be beside it: the header is longer
   than "Initial Quantity" was at this size, and this is the cell an overrun
   badge shares with its figure. See the fragment's PANE_COLS. */
.sc-col--qty {
  width: 120px;
}

/* FieldHeader in the pane: font-medium text-muted-foreground at body size, and
   no vertical rule between header cells — the view table's own header draws
   none either. */
.sc-col {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px; /* gap-1.5 = 6 */
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  color: var(--sc-text-sec);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* A header's type icon is the same colour as its label: FieldIcon's
   `text-muted-foreground-opaque` and TableHead's `text-muted-foreground` are
   defined identically in both themes, the "opaque" spelling being an alpha-free
   value rather than a lighter step. */
.sc-col svg {
  width: 11px;
  height: 11px;
}

.schedule-mockup svg[data-filled] {
  fill: currentColor;
  stroke: none;
}

.sc-axis {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* No border here: `.sc-tl-head` carries it now, across the pane as well. */
}

.sc-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-text-sec);
}

/* The app's today marker: a 22px red pill holding the day of the month, centred
   on its own column. No weekday letter — that is the Week and Bi-week zooms
   only. */
.sc-today-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.sc-today-pill > span {
  width: 17px; /* size-[22px] */
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--sc-red);
  color: #fff;
  font-size: var(--text-product-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------------------------
   The canvas. Two stacked layers rather than one row each: the plot clips at
   the pane's right edge, which is what lets a bar that started in March carry a
   negative left without painting over the pane. In the app the same separation
   is a sticky left column inside one scroll container.
   ------------------------------------------------------------------------- */

/* `flex: none` and a height from the fragment (`rows x ROW_H`), which is the
   divergence from the app that puts the footer under the last row instead of
   at the bottom of the frame — see the note on CANVAS in schedule-mockup.mjs.
   The slack lands after the footer, on the main region's surface. */
.sc-tl-canvas {
  position: relative;
  flex: none;
  min-height: 0;
  overflow: hidden;
}

.sc-plot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 320px;
  right: 0;
  overflow: hidden;
}

/* getTimelineGridStepPx: week ticks give `pxPerDay * 7`, i.e. one rule a week.
   There are no weekend bands at this zoom — `weekendBackgroundStyle` is gated
   on day ticks — and that is the app's answer, not an omission. */
/* The rules land on the bucket edges — 0, 63, 126 … — and the one at 0 is the
   plot's own left edge, i.e. exactly where `.sc-pane`'s `border-right` already
   draws. Two 1px rules side by side make the pane's boundary read 2px where
   every other rule on the board is 1. So the layer starts 1px in and its
   background origin is pulled 1px back: the tiling is unmoved (still 0, 63,
   126 in the plot's own coordinates, still under the axis ticks and the value
   cells), and the rule at 0 is simply clipped off by the inset. Do not shift
   `background-size` or `.sc-plot`'s `left` to fix this — either one moves every
   rule off its bucket. */
.sc-grid {
  position: absolute;
  inset: 0;
  left: 1px;
  background-image: linear-gradient(to right, var(--sc-line) 1px, transparent 1px);
  background-repeat: repeat-x;
  background-position-x: -1px;
  background-size: 63px 100%; /* 7 days at 9px — one rule a week, and at the
     quarter zoom that is also one value cell and one axis tick */
}

/* OVER THE BOARD, at the owner's direction 2026-09-01, and this is a
   divergence. The app draws the today line at z-10, under the connectors (12)
   and under the bars (15) — which on a board this dense means the line is
   hidden behind every bar it crosses and survives only in the gaps between
   rows, so it renders as a broken column of red dashes rather than as one
   line. A reader cannot follow a dashed line to a date. Above the bars it is
   one continuous 1px rule from the axis to the last row, which is the whole
   job it has: saying where today is. The connectors keep their own order
   against the bars (12 under 15), so a wire still passes UNDER the bars it
   joins. */
.sc-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4; /* over the bars (3), which the app does not do — see above */
  width: 1px;
  background: var(--sc-red);
}

.sc-pane-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px;
  z-index: 20;
}

.sc-pane {
  position: absolute;
  left: 0;
  height: 27px; /* ROW_HEIGHT = VIEW_TABLE_ROW_HEIGHT = 36 */
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-line);
  border-right: 1px solid var(--sc-line);
}

/* ONE RULE UNDER THE LAST ROW, not two. Every row carries its own
   `border-bottom` and `.sc-tl-foot` carries a `border-top`, and since the
   canvas was shortened to its rows those two are adjacent — 2px of rule under
   the pane against 1px under the canvas beside it, which reads as a doubled
   line that stops halfway across. The footer's own rule spans both halves, so
   it is the one to keep. In the app the two never meet: the canvas fills the
   viewport and there is a field of empty board between them. */
.sc-pane:last-child {
  border-bottom: 0;
}

.sc-cell {
  flex: none;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
}

.sc-cell + .sc-cell {
  border-left: 1px solid var(--sc-line);
}

.sc-num {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   The overrun badge, `renderPhasedVariance` in the view table's NumberCell.

   It rides in the phased field's own cell whenever the row's pins already come
   to more than its stored quantity — see EXPECTED_OVERRUN in the fragment for
   which rows and why. The app puts it on the LEFT and switches the cell to
   `justify-between` so the right-aligned figure stays flush with the column;
   that is the whole layout, and it is why the column is 120 and not 90.

   Geometry is the app's, scaled: `px-1.5` 6 -> 4.5, `py-1` 4 -> 3, `gap-1`
   4 -> 3. `rounded-md` (6) is NOT scaled, for this sheet's stated reason. Type
   does not scale either — the app's `text-[11px]` and this window's small tier
   are both 11, so the badge lands at 1:1 the way the strip's values do.

   The colour is `--color-orange-badge` / `--color-orange-badge-foreground`,
   which is the same pair `.sc-chip[data-tone='orange']` carries below — the
   app's own comment says this theme has no amber hue, so orange's badge tokens
   are its amber. It is restated rather than shared because the chip is a tag
   and this is a warning; the two are free to part company.
   ------------------------------------------------------------------------- */

.sc-num[data-variance] {
  justify-content: space-between;
  gap: 3px;
  /* The badge's tooltip stands above the cell, and every other cell in this
     pane clips (`.sc-cell` is `overflow: hidden` for the Name column's
     ellipsis). This one holds a badge and a figure and neither needs an
     ellipsis, so it can let the tooltip out. Nothing above it clips either:
     `.sc-pane` and `.sc-pane-col` are both `visible`, and all three overrun
     rows sit mid-board, well inside `.sc-tl-canvas`. */
  overflow: visible;
}

.sc-var {
  position: relative; /* the tooltip below hangs off it */
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4.5px;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  font-size: var(--text-product-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  background: rgb(226 146 18 / 0.27);
  color: #4e2b0d;
}

/* The geometric glyph rides high on its own baseline; the app nudges it down
   half a pixel so it sits optically centred with the amount. */
.sc-var-mark {
  transform: translateY(0.5px);
}

/* -------------------------------------------------------------------------
   THE BADGE'S TOOLTIP — `LazyTooltip content={label}` in `renderPhasedVariance`,
   drawn as `components/ui/tooltip.tsx` draws it and not as a native `title`.

   The plate is the app's literal `bg-neutral-800` with `text-white`, and it
   carries NO dark variant there — a tooltip is the one surface in the app that
   is dark in both themes — so it is one colour here too. `rounded-[6px]` is
   not scaled, for this sheet's stated reason about corners; `px-2 py-1` (8/4)
   and Radix's `sideOffset={4}` are, to 6 / 3 / 3. Type is `text-xs`, i.e. 12,
   which is this window's `--text-product-base` at 1:1 — the badge beside it is
   11 at 1:1 for the same reason.

   Radix's default side is `top` and its default align is `center`, so the
   plate is centred over the badge with its own arrow suppressed (the
   component destructures `showArrow` and never renders one).

   The reveal is guarded on `hover: hover`, the guard integrations.css and
   bid-hero-mockup.css both put on their hover states: a touch device leaves
   hover stuck on the last thing pressed, and a still frame with a tooltip
   pinned open is a state the app never has. On a phone the badge is simply a
   badge, which is the app's own resting render.
   ------------------------------------------------------------------------- */

.sc-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px); /* sideOffset 4 */
  z-index: 30;
  display: none;
  transform: translateX(-50%);
  max-width: 180px; /* max-w-[240px] */
  padding: 3px 6px; /* py-1 px-2 */
  border-radius: 6px; /* rounded-[6px], not scaled */
  border: 1px solid rgb(255 255 255 / 0.12); /* border-border/50 on a dark plate */
  background: #262626; /* neutral-800, in both themes */
  color: #fff;
  font-size: var(--text-product-base);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: normal;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.28); /* shadow-popover */
}

@media (hover: hover) {
  .sc-var:hover .sc-tip {
    display: block;
  }
}

:root[data-theme='dark'] .sc-var {
  background: rgb(239 146 0 / 0.45);
  color: rgb(255 255 255 / 0.87);
}

/* The bar. `rounded-[8px] border border-border/60 bg-popover shadow-sm`, and
   `--popover` is the app's card surface — a step off the main region, which is
   what lifts the bar off the canvas. */
.sc-bar {
  position: absolute;
  /* The canvas stack is the app's: grid, then the today line (z-10), then the
     dependency layer (z-12), then the bars (z-15). A wire has to pass UNDER
     the bars it joins, or the arrowhead lands on top of the successor's first
     value instead of pointing at its edge. */
  z-index: 3;
  height: 26px; /* BAR_HEIGHT = 34 */
  overflow: hidden;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  background: var(--sc-bar-fill);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* One phased bucket. A hairline between buckets rather than a grid: the values
   have to stay quieter than the bar outline around them. */
.sc-pcell {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 2px;
  border-right: 1px solid color-mix(in srgb, var(--sc-line) 40%, transparent);
  font-variant-numeric: tabular-nums;
  /* estimatedValueClassName — `italic text-foreground/50`. This is the FORECAST
     half: a bucket the spread worked out. The italic is half the signal and not
     decoration; nothing in the app sets one without the other. */
  font-style: italic;
  color: var(--sc-text-dim);
}

/* ...and the ACTUALS half. `TimelinePhasedStrip` draws a `cell.manual` bucket
   `font-medium text-foreground/85` — upright, heavier and at full ink — where
   every other one takes the estimate treatment above. `manual` is
   `bucket.pinnedExactly`, i.e. the bucket IS one period pin, which on this
   board is every month that closed before today. So the red line is also the
   line between what was placed and what is forecast, and a reader can see
   which is which without reading a number. */
.sc-pcell[data-manual] {
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: color-mix(in srgb, var(--sc-text) 85%, transparent);
}

.sc-pcell:last-child {
  border-right: 0;
}

/* -------------------------------------------------------------------------
   Dependency connectors.

   `TimelineDependencyArrows` renders one canvas-sized `<svg>` at `z-[12]`,
   between the today line (z-10) and the bars (z-15), and the plot's own
   `overflow: hidden` cuts it — so a wire runs UNDER the bars it joins and
   stops at the canvas edge, which is what keeps it reading as part of the
   board rather than as ink over it.

   The gold is the app's own literal, both themes: `text-[#9a7b33]
   dark:text-[#b39041]`, reserved there for connectors that are actually wired
   up (a drag in flight and an edge still waiting on setup both read muted, and
   a still frame has neither).

   The `.schedule-mockup svg` rule above sizes every glyph at 12px and gives it
   a 1px non-scaling stroke, which is right for lucide and wrong for a canvas
   overlay — so all four of those declarations are restated here.
   ------------------------------------------------------------------------- */

.sc-deps {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
  color: #9a7b33;
}

:root[data-theme='dark'] .sc-deps {
  color: #b39041;
}

.sc-deps path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

.sc-dep {
  opacity: 0.9;
}

/* The arrowhead. `markerUnits="userSpaceOnUse"` at 9x9 with a 2px stroke, so
   the marker's own stroke-width is set here rather than inherited from the
   path that references it. */
.sc-deps marker path {
  stroke-width: 1.5; /* 2 */
}

/* -------------------------------------------------------------------------
   The phased footer. With phasing on the timeline has ONE footer line, not
   two: the pane's calculations cells ride in this row's left slot, so
   "Sum 1,867,252" and the per-period totals share it.
   ------------------------------------------------------------------------- */

.sc-tl-foot {
  position: relative;
  height: 29px; /* PHASED_FOOTER_HEIGHT = 38 */
  flex: none;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--sc-line);
  background: var(--sc-surface);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.sc-foot-pane {
  border-right: 1px solid var(--sc-line);
}

/* NO COLUMN RULES IN THE FOOTER, at the owner's direction 2026-09-01. The rows
   above carry `.sc-cell + .sc-cell`'s hairline because `show_vertical_lines` is
   on for this view; down here the only thing in the row is one calculation, so
   the rules were dividing two empty cells from the one that says "Sum" and read
   as the table continuing past its own last row. This is a divergence from the
   app, which draws them. */
.sc-foot-pane .sc-cell + .sc-cell {
  border-left: 0;
}

.sc-foot-canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sc-fcell {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 3px;
}

/* The calculations cell, in the table's own arrangement: the aggregation's name
   in secondary, the figure beside it. */
.sc-calc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sc-calc-label {
  font-weight: var(--font-weight-normal);
  color: var(--sc-text-dim);
}

/* The aggregation's own floating label, which this sheet used to leave out.
   `PhasedFooterCalculation` is `CalculationCellContent` verbatim with
   `result={null}`: the figures it names are the period cells out on the canvas,
   so only the label renders — and it renders AT REST. The `revealClassName`
   that would hide it (`opacity-0 group-hover/phased-footer:opacity-100`)
   dresses only the "Calculate" placeholder branch, i.e. the state where no
   aggregation is configured; this view's is `sum`.

   In the app it is `sticky` at the pane's right edge on an opaque ground, so
   the period values scroll beneath it — the same trick the axis plays with its
   month name. It is drawn flush against the pane's rule because the trigger's
   own `-mx-1.5` pulls it back inside the slot's `px-2`, and it is `font-normal
   text-secondary-opaque` where the figures beside it are `font-medium
   text-foreground`, which is what stops a caption reading as a total.

   **Its opaque ground is the leading period's FULL width, and that is the one
   divergence.** In the app the label carries only its own `px-2`, so it covers
   the left half of whatever cell is under it — an artefact of scrolling, and
   harmless while the number is long enough to read past. At a 63px week the
   leading total is a compact "25.2K" centred at 31px, and half of it is "2K":
   a number that is not occluded but WRONG. Covering the cell outright loses one
   of eight totals and says so; leaving it half-lit invents a figure. */

.sc-foot-calc {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 6px 0 2px; /* px-2 (8) less the trigger's own -mx-1.5 (6) */
  /* Width comes from the fragment: the leading period's own, so the ground
     ends exactly on a bucket edge rather than mid-number. */
  background: var(--sc-surface);
  font-weight: var(--font-weight-normal);
  color: var(--sc-text-sec);
}

/* -------------------------------------------------------------------------
   Unit badges. The Units collection carries `icon_type: "color"`, the first
   branch DocumentPkAvatar tests, so a unit is a tinted badge and never an
   avatar. The five tones are the stored `icon.key`s, converted from the app's
   oklch — restated from items-mockup.css rather than shared, per the fork rule.
   `CY` is spelled `grey`, which is not one of DOCUMENT_ICON_COLORS, so the app
   resolves it to `--default-badge`; drawn as it lands.
   ------------------------------------------------------------------------- */

.sc-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 15px; /* leading-5 = 20 */
  padding: 0 4px;
  border-radius: 4px;
  background: var(--sc-chip-bg);
  color: var(--sc-chip-fg);
}

.sc-chip[data-tone='blue'] {
  --sc-chip-bg: rgb(65 139 198 / 0.27);
  --sc-chip-fg: #001f43;
}

.sc-chip[data-tone='green'] {
  --sc-chip-bg: rgb(80 158 114 / 0.27);
  --sc-chip-fg: #002f23;
}

.sc-chip[data-tone='yellow'] {
  --sc-chip-bg: rgb(243 171 28 / 0.39);
  --sc-chip-fg: #4b3314;
}

.sc-chip[data-tone='orange'] {
  --sc-chip-bg: rgb(226 146 18 / 0.27);
  --sc-chip-fg: #4e2b0d;
}

/* MO. `--gray-badge` is `oklch(0.4075 0.0391 83.27 / 0.15)` over
   `oklch(0.2225 0.0099 88.79)` in light, and the SOLID `--gray-primary`
   (`oklch(0.5965 0.0001 274.03)`) in dark — the one badge in the app's palette
   that is not translucent. */
.sc-chip[data-tone='gray'] {
  --sc-chip-bg: rgb(84 72 49 / 0.15);
  --sc-chip-fg: #1d1b16;
}

.sc-chip[data-tone='default'] {
  --sc-chip-bg: var(--sc-hover);
  --sc-chip-fg: var(--sc-text);
}

:root[data-theme='dark'] .sc-chip {
  --sc-chip-fg: rgb(255 255 255 / 0.87);
}

:root[data-theme='dark'] .sc-chip[data-tone='blue'] {
  --sc-chip-bg: rgb(0 103 165 / 0.5);
}

:root[data-theme='dark'] .sc-chip[data-tone='green'] {
  --sc-chip-bg: rgb(0 128 85 / 0.5);
}

:root[data-theme='dark'] .sc-chip[data-tone='yellow'] {
  --sc-chip-bg: rgb(246 168 0 / 0.5);
}

:root[data-theme='dark'] .sc-chip[data-tone='orange'] {
  --sc-chip-bg: rgb(239 146 0 / 0.45);
}

:root[data-theme='dark'] .sc-chip[data-tone='gray'] {
  --sc-chip-bg: #7f7f7f;
}

:root[data-theme='dark'] .sc-chip[data-tone='default'] {
  --sc-chip-bg: var(--sc-hover);
  --sc-chip-fg: var(--sc-text);
}

/* =========================================================================
   Narrow frames.

   The captured window is `width: 990px; max-width: calc(100% - 64px)`, so it is
   fluid and whole rather than clipped by a panel: 990 at 1440, 704 at a 768
   viewport and 326 at 390. Everything above is drawn against the widest of
   those, and the canvas is the only part that can absorb the difference — so
   the sidebar goes first (the app collapses it, and this window's subject is
   not the rail), then the pane's third column, then the pane's second.

   These are container queries on the mockup itself and not media queries, for
   items-mockup.css's reason: the frame's width is set by the *frame*, and a
   viewport query would fire at the wrong widths.
   ========================================================================= */

.schedule-mockup {
  container-type: inline-size;
}

@container (max-width: 860px) {
  .sc-side {
    display: none;
  }
}

@container (max-width: 620px) {
  .sc-col--qty,
  .sc-cell.sc-col--qty {
    display: none;
  }

  .sc-pane-head,
  .sc-pane,
  .sc-foot-pane,
  .sc-pane-col {
    width: 200px; /* 320 less the Bid quantity column */
  }

  .sc-plot {
    left: 200px;
  }

  .sc-pane-strip {
    width: 201px;
  }
}

/* A 390px viewport gives the captured frame 326px, of which the pane at its
   full width would leave ~90px of canvas — a timeline with no time in it. Name
   comes down to the ~18 characters a bid item needs before its parenthetical,
   which puts half the frame back on the canvas. */
@container (max-width: 420px) {
  .sc-col--name {
    width: 110px;
  }

  .sc-pane-head,
  .sc-pane,
  .sc-foot-pane,
  .sc-pane-col {
    width: 134px; /* 24 gutter + 110 Name */
  }

  .sc-plot {
    left: 134px;
  }

  .sc-pane-strip {
    width: 135px;
  }
}
/* GENERATED — do not hand-edit. Regenerate with:
 *     python3 tools/manage-quotes-restate.py
 *
 * Every rule src/styles/product.css has for a class the moved markup uses and
 * src/styles/cloud.css does not already carry, scoped to `[data-manage-quotes]`. The comparison is
 * per rule, not per class — see tools/lib/restate_css.py.
 *
 * Restated: 11 classes, 11 rules.
 * Inert in every sheet in this repo (so inert on the source page too):
 *   bq-logo
 */
[data-manage-quotes] .avatar-border-container{z-index:1;border-radius:3.40282e38px;position:relative;overflow:hidden}
[data-manage-quotes] .mt-v2{margin-top:var(--spacing-v2)}
[data-manage-quotes] .block{display:block}
[data-manage-quotes] .h-\[2\.5rem\]{height:2.5rem}
[data-manage-quotes] .w-\[2\.5rem\]{width:2.5rem}
[data-manage-quotes] :where(.space-x-\(--grid-gap\)>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--grid-gap)*var(--tw-space-x-reverse));margin-inline-end:calc(var(--grid-gap)*calc(1 - var(--tw-space-x-reverse)))}
[data-manage-quotes] .whitespace-pre-wrap{white-space:pre-wrap}
@media (min-width:660px){[data-manage-quotes] .md\:aspect-2\/1-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}}
@media (min-width:660px){[data-manage-quotes] .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){[data-manage-quotes] .lg\:aspect-8\/5-box{grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));display:grid}}
@media (min-width:900px){[data-manage-quotes] .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/*
 * /manage's "Everywhere you work" section: the same project page on four
 * surfaces.
 *
 * NOT generated by `pnpm run port`. Hand-maintained, imported by the cloud page
 * alone (see `astroPage` in tools/04-generate.mjs) and by CardGallery.astro,
 * which draws /manage's harvested cards on every page. Paired with
 * tools/fragments/manage-surfaces.mjs, whose header carries the reasoning for
 * the records, the crop, the two scales and the shells; what follows is the
 * drawing.
 *
 * EVERY LENGTH HERE IS THE APP'S OWN, UNSCALED
 * --------------------------------------------
 * `nav-panel.css`'s model rather than `hero-mockup.css`'s: each `.ms-screen`
 * is a sheet of bidlo-light-1.0's own CSS pixels under one `transform:
 * scale()`, so a number in this file is the number in that repo and nothing is
 * multiplied by hand. Do NOT import `--text-product-*` here, and do not scale
 * a length to make something fit — change the scale and re-check the fragment's
 * own arithmetic, including the app's 720px sidebar auto-hide threshold, which
 * is what sets the desktop scale's ceiling.
 *
 * COLOUR
 * ------
 * `bid-surfaces.css`' `--bs-*` table under a new prefix, and for the same
 * reasons. Two of them are worth restating:
 *
 *   --ms-text-sec / -dim   FLATTENED with `color-mix`, not alpha. The site's
 *                          `--color-theme-product-text-sec` / `-tertiary` are
 *                          the foreground at 60 % and 40 % ALPHA, and a lucide
 *                          glyph is several `<path>`s — so every crossing
 *                          composites a step darker than the lines running into
 *                          it. The app carries the same pair of names
 *                          (`text-secondary-opaque`) for the same reason.
 *   --ms-chip-*            the app's badge palette, converted from oklch, with
 *                          a dark restatement because the light ladder inverts.
 *
 * THREE SCALES FOR FOUR CARDS, AND EVERY ONE OF THEM IS SOLVED
 * -----------------------------------------------------------
 * The desktop window and the tablet both take `--ms-zoom` (0.47) — two cards
 * side by side must render the app's 14px type at one size — and the phone
 * takes `--ms-zoom-phone` (0.75), which is bigger because a phone's CSS pixel
 * is physically bigger. Card 4 is not a device at all and takes
 * `--ms-zoom-share`, which as of 2026-09-07 is **(378 - 48) / 378 = 0.873** —
 * solved so the block sits on the captured figure's own `--demo-pad`, the same
 * 24 the three devices' `top` sits on. It was 0.645, solved the other way round
 * off a fixed 380px panel against the narrowest plate, and that drew this
 * card's type at 9px; the fragment's header carries the swap, the panel width
 * it now solves and why the pad won the last point of type. All of them are
 * `transform-origin: 0 0` so a sheet's top-left is its screen's top-left and
 * nothing has to be re-solved.
 *
 * ONE COUPLING TO KNOW ABOUT
 * --------------------------
 * `src/scripts/empty-mockups.js` blanks a window by finding a `<div>` with
 * exactly three small round children and hiding that container's siblings.
 * Card 1's body carries `data-mockup-filled` so the script skips it, and every
 * box inside a screen is a `<span>` — which that script never queries — which
 * is why this file has to blockify spans, and why it does so inside `:where()`
 * so a single-class layout rule below can still out-rank it. A bare
 * `.ms-mockup span` scores (0,1,1) and would beat every one of them; that trap
 * has already cost this repo a build in `automate-hero-mockup.css`.
 */

.ms-mockup {
  --ms-surface: var(--color-theme-bg);
  --ms-chrome: var(--color-theme-card-hex);
  --ms-hover: var(--color-theme-card-02-hex);
  --ms-active: var(--color-theme-card-03-hex);
  --ms-rule: var(--color-theme-card-04-hex);
  --ms-line: var(--color-theme-border-02);
  --ms-text: var(--color-theme-product-text);
  --ms-text-sec: color-mix(in srgb, var(--color-theme-fg) 60%, var(--ms-surface));
  --ms-text-dim: color-mix(in srgb, var(--color-theme-fg) 40%, var(--ms-surface));
  --ms-accent: #2483e2;

  /* The two numbers that turn app pixels into card pixels. Solved in the
     fragment's header; do not nudge either to make something fit. */
  --ms-zoom: 0.47;
  --ms-zoom-phone: 0.75;
  /* (378 - 2 x 24) / 378 — solved so the block sits on the same `--demo-pad`
     the three devices do. See the header. */
  --ms-zoom-share: 0.873;

  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--ms-text);
  font-family: var(--font-system);
  /* text-sm / leading-5, the app's body size. Unscaled, like everything else. */
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: default;
}

.ms-mockup *,
.ms-mockup *::before,
.ms-mockup *::after {
  box-sizing: border-box;
}

/* Every box in a screen is a `<span>` — see the empty-mockups note above. The
   `:where()` contributes no specificity, so the single-class rules below win. */
.ms-mockup :where(span) {
  display: block;
}

.ms-mockup svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The sheet is scaled, so a 1px rule would render at 0.47 of one and smear.
     Same call every scaled mockup on this site makes. */
  vector-effect: non-scaling-stroke;
}

.ms-mockup svg[data-filled] {
  fill: currentColor;
  stroke: none;
}

.ms-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   The three device hosts.
   ========================================================================= */

.ms-screen {
  display: flex;
  transform-origin: 0 0;
  background: var(--ms-surface);
}

.ms-screen--desktop {
  width: 979px;
  height: 643px;
  transform: scale(var(--ms-zoom));
}

/* 661, not 685, as of 2026-09-09: the status band takes 24 app px off the
   viewport, so the sheet is (322 - 11.28) / 0.47. Solved in the fragment. */
.ms-screen--tablet {
  width: 962px;
  height: 661px;
  transform: scale(var(--ms-zoom));
}

/* 792, not 856, as of 2026-09-09: the notch strip is back and takes its 48
   card px off the app, so the sheet is (642 - 48) / 0.75. Solved in the
   fragment. */
.ms-screen--phone {
  width: 390px;
  height: 792px;
  transform: scale(var(--ms-zoom-phone));
}

/* The tablet's and the phone's screen boxes. Both are `position: absolute`
   rather than sized in flow, because the device shells around them are the
   capture's own markup and are not flex containers.

   BOTH START UNDER A BAND AS OF 2026-09-09, and both insets are numbers the
   fragment owns: the tablet's is iPadOS's 24pt status bar at the card's scale
   (24 x 0.47 = 11.28 card px, `TABLET_BAND`), the phone's is the capture's own
   48px notch strip (`PHONE.notch`). Each is also a term in the page-icon
   alignment — `SCREEN_TOP` in the fragment — which is why neither could be
   added to the markup alone; the banners under them re-solved with them. */
.ms-tablet-app {
  position: absolute;
  inset: 11.28px 0 0 0;
  overflow: hidden;
}

/* The tablet's status band: empty, no glyph and no text — a still has nothing
   to toggle and the row already has one window with three traffic lights in
   it. Painted the app's chrome token, which is the sidebar's and the desktop
   window's own bar, so the row's chrome is one colour; it is a step off
   `--ms-surface` in both themes and inverts on its own, so there is no dark
   restatement. The height is stated inline by the fragment (`TABLET.band`) and
   restated here only for the inset above; a test pins the two together. */
.ms-tablet-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 11.28px;
  background: var(--ms-chrome);
}

/* `inset: 48px 0 0 0`: the notch strip is back as of 2026-09-09 (it was off
   for two days and the app filled the screen). `PHONE_APP.h` is solved off it
   — (642 - 48) / 0.75 = 792 of sheet under 594 card px of app. */
.ms-phone-app {
  position: absolute;
  inset: 48px 0 0 0;
  overflow: hidden;
}

/* The notch strip, whose one job is its colour: the captured screen div is
   `bg-theme-product-editor`, which sits a step LIGHTER than the page behind it,
   so the 48px band above the app read as a strip of a third tone over the
   app's own surface. Painting it `--color-theme-bg` — `--ms-surface`, the
   same token `.ms-screen` is painted — makes the band the app's own ground
   with the island on it. Both themes, the token inverting on its own. */
.ms-phone-notch {
  background: var(--ms-surface);
}

/* =========================================================================
   The sidebar. Card 1 only — the tablet has it hidden and the phone has no
   sidebar at all.
   ========================================================================= */

.ms-side {
  width: 200px; /* the app's default; resizable 150-460 */
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ms-chrome);
  border-right: 1px solid var(--ms-line);
}

/* h-13 = 52; advanced removes this row's border-b. */
.ms-side-head {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

/* Advanced-only: the account menu, a full-width `h-9` rounded-full item. */
.ms-team {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  padding-right: 8px;
  border-radius: 999px;
  font-weight: var(--font-weight-medium);
}

/* A 40px well holding a 20px avatar, which lands the avatar's centre on the
   same column the nav strip's icon wells establish below. */
.ms-team-well {
  width: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-avatar {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ms-accent);
  color: #fff;
  font-size: 10px; /* text-[10px] */
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* The mobile menu surface runs the same avatar at thumb size. */
.ms-avatar--lg {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* -------------------------------------------------------------------------
   The horizontal destination row. Advanced complexity flips `SidebarStaticLinks`
   to `flex-row` and collapses every inactive item to its icon; Search sits
   flush right and is not a sidebar page, so it is a plain circle.
   ------------------------------------------------------------------------- */

.ms-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px; /* gap-1 */
  padding: 0 8px 8px;
  font-size: 15px; /* the container is text-[15px] */
}

.ms-nav-item {
  height: 36px; /* h-sidebar-nav-item under advanced */
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: var(--ms-text-dim); /* text-muted-foreground-opaque */
}

/* The icon well is the pill's own height, so an inactive pill is a circle. */
.ms-nav-well {
  width: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Accent in both states — the app's one piece of standing colour here. */
  color: var(--ms-accent);
}

.ms-nav-well svg,
.ms-nav-search svg {
  width: 18px; /* size-4.5 */
  height: 18px;
}

.ms-nav-item[data-active] {
  padding-right: 12px;
  background: var(--ms-active);
  color: var(--ms-text);
}

/* Inactive labels are absent rather than collapsed: in the app the label is a
   grid column animated 0fr -> 1fr, and this is a still. */
.ms-nav-item:not([data-active]) .ms-nav-label {
  display: none;
}

/* `SidebarSearchButton`: chrome, not a destination, so it takes the header's
   ghost treatment rather than the tabs' accent. */
.ms-nav-search {
  margin-left: auto;
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ms-text-dim);
}

/* -------------------------------------------------------------------------
   The page list. Section names are the raw SectionKey through `capitalize`,
   which is why they read Favorites / Public / Private and nothing else.
   ------------------------------------------------------------------------- */

.ms-pages {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 8px;
}

.ms-section {
  height: 32px; /* h-sidebar-item under advanced */
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 8px; /* rounded-md */
  color: var(--ms-text-dim); /* text-secondary */
  font-weight: var(--font-weight-medium);
}

.ms-section:not(:first-child) {
  margin-top: 8px;
}

.ms-page {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--ms-text-sec);
}

.ms-page svg {
  width: 15px;
  height: 15px;
  color: var(--ms-text-dim);
}

/* -------------------------------------------------------------------------
   The sidebar's foot: advanced complexity's direct replacement for the global
   header it deletes.
   ------------------------------------------------------------------------- */

.ms-side-foot {
  flex: none;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.ms-search {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  background: var(--ms-surface);
  color: var(--ms-text-dim);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.03);
}

.ms-round-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  background: var(--ms-surface);
  color: var(--ms-text-sec);
}

/* The inbox unread badge, at the app's -top-0.5 -right-0.5. */
.ms-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ms-accent);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

/* =========================================================================
   The main region. `data-panel-region="main"` is what the app's
   `complexity-advanced-main` variant keys off to move every sticky surface in
   it from --muted onto --background.
   ========================================================================= */

.ms-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ms-surface);
}

/* group/content-header: advanced forces `p-2` and removes the border-b. */
.ms-main-head {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
}

.ms-head-lead {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

/* `DesktopSidebarAction`: a 44px well the app animates open when the rail is
   hidden, holding a `size-6` Menu glyph. It is the one piece of chrome that
   says which of the two desktop-shell states a card is drawing, so it is the
   tablet's and nothing else's. */
.ms-sidebar-action {
  width: 44px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-text);
}

.ms-sidebar-action svg {
  width: 24px; /* size-6 */
  height: 24px;
}

/* `MobileDocumentBackButton`: `size-9` with `mobile:-mr-2.5`, which pulls the
   chevron's unused right edge into the page icon's box rather than trimming
   either target. */
.ms-back {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  color: var(--ms-text-dim);
}

.ms-back svg {
  width: 20px; /* size-5 */
  height: 20px;
}

/* `DocumentCrumb`: a 36px well holding the document's own 20px icon, then its
   name as an inline text field at text-sm font-medium — body size, not a
   heading. For a project that icon is the owning agency's logo. */
.ms-crumb {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ms-crumb-well {
  width: 36px; /* size-9 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-crumb-well img {
  width: 20px; /* size-5 */
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.ms-crumb-title {
  margin-left: -4px; /* the field's own -ml-1 against its px-2 */
  padding: 0 8px;
  font-weight: var(--font-weight-medium);
}

.ms-head-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Two faces, not three — see the empty-mockups note at the top of this file. */
.ms-faces {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

.ms-face {
  width: 24px; /* size-6 */
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ms-surface);
  background: var(--ms-active);
  color: var(--ms-text-sec);
  font-size: 10px; /* text-[10px] */
  line-height: 1;
  font-weight: var(--font-weight-medium);
}

.ms-face + .ms-face {
  margin-left: -5px;
}

/* Square ghost icon button: the header's toggle / star / overflow and the views
   app's settings trigger. `size-9` around a `size-4` glyph. */
.ms-icon-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* rounded-sm */
  color: var(--ms-text-dim);
}

/* =========================================================================
   The document page.
   ========================================================================= */

.ms-doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* DOCUMENT_PAGE_INLINE_PADDING resolves to
   `max(min(2rem, 5cqw), 50cqw - 540px)`, which for a 778px main panel and for a
   1024px one alike is the flat 32. The phone's own line in
   DOCUMENT_PAGE_PADDING_CONTAINER_CLASS takes the minimum to 0.875rem. */
.ms-pad {
  flex: none;
  padding: 0 32px;
}

.ms-screen--phone .ms-pad {
  padding: 0 14px;
}

/* -------------------------------------------------------------------------
   The banner. `DocumentBanner` is `w-full h-[30vh] max-h-[280px]`, which the
   mobile shell takes to `20vh / 168px`.

   CARD 1 AND THE PHONE DRAW THAT RULE; ONLY THE TABLET IS SOLVED, so that its
   page icon top-aligns on card 1's — see the ICON ALIGNMENT block in
   tools/fragments/manage-surfaces.mjs, which derives every term and exports
   `BANNER_HEIGHTS`; a test re-runs the solve against these three numbers.
   Re-solve there, never nudge here.

   THE PHONE LEFT THAT SOLVE ON 2026-09-09, at the owner's direction: held on
   card 1's line its banner was 64 app px, a 48 card px sliver of map under a
   300px handset. Its icon and title now sit 67.35 card px lower than the other
   two and the tab strip goes mostly off the plate's cut, which is the trade.
   ------------------------------------------------------------------------- */

.ms-banner {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--ms-hover); /* the app's own bg-hover under a loading map */
}

.ms-screen--desktop .ms-banner {
  height: 193px; /* 30vh of 643 */
}

.ms-screen--tablet .ms-banner {
  height: 218px; /* solved to card 1's icon; 30vh of 661 would be 198 */
}

.ms-screen--phone .ms-banner {
  height: 158px; /* the app's own min(20vh, 168px) of 792; the cap does not bind */
}

.ms-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The app picks its map style off the resolved theme (`getMapStyle`), so this
   does too. Only one of the two is ever painted. */
.ms-map[data-theme-dark] {
  display: none;
}

:root[data-theme='dark'] .ms-map[data-theme-light] {
  display: none;
}

:root[data-theme='dark'] .ms-map[data-theme-dark] {
  display: block;
}

/* The project's route, and the only thing drawn over the map: a pinned document
   carrying a shape loses its marker outright in the app. Every value is
   `polygon-outline`'s — `line-color` is `MAP_COLOR_MAP.default`, i.e. the app's
   `--primary`; `line-width` 4; `line-opacity` unset, so 1; `line-cap`/`join`
   unset, so Mapbox's butt/miter, which are also SVG's initial values and are
   restated here only because `.ms-mockup svg` sets round caps for the glyphs.

   Two classes because that glyph rule scores (0,1,1) and a bare `.ms-route`
   would lose to it. */
.ms-mockup .ms-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ms-accent);
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* -------------------------------------------------------------------------
   The title block.
   ------------------------------------------------------------------------- */

/* PageIcon: a 40px box with the 78px icon absolutely bottom-aligned in it, so
   the icon rides up over the banner by its own height less 40. An `image`-kind
   icon takes `left-1.5`, a hairline and shadow-sm. */
.ms-page-icon {
  position: relative;
  height: 40px; /* h-10 */
  z-index: 1;
}

.ms-page-icon img {
  position: absolute;
  bottom: 0;
  left: 6px; /* left-1.5 */
  width: 78px;
  height: 78px;
  border-radius: 8px; /* rounded-md */
  border: 1px solid var(--ms-line); /* border-border/10 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  object-fit: cover;
}

/* `page-icon.tsx`'s own mobile pair: `mobile:h-8 mobile:w-[52px]` on the box,
   `mobile:size-[52px]` on the icon and `mobile:left-0` on the image kind. */
.ms-screen--phone .ms-page-icon {
  height: 32px;
}

.ms-screen--phone .ms-page-icon img {
  left: 0;
  width: 52px;
  height: 52px;
}

/* The title's hover-only controls — Add icon / Add banner / Quick actions /
   Customize layout — are `opacity-0` at rest but always take their height
   (pt-2 + h-8 + pb-1 = 44), which is why the gap under the icon is part of the
   page rather than an accident. Drawn at the app's own value: unlike
   hero-mockup.css this file is not fighting for table rows, the four screens
   being composed for their top halves. */
.ms-title-tools {
  height: 44px;
}

/* And the phone does not reserve it at all: the strip is `mobile:hidden`,
   which is the app being honest about a device with no hover. What it leaves
   in its place is the title wrapper's own `mobile:pt-2`. */
.ms-screen--phone .ms-title-tools {
  height: 8px;
}

/* text-[40px] leading-[48px] font-bold, in the textarea's own px-1.5. */
.ms-doc-title {
  padding: 0 6px;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ms-text);
}

/* The phone's title is the app's own mobile step, not a guess:
   `title.tsx` carries `mobile:text-[28px] mobile:leading-[34px]` beside the
   40/48, and `mobile:px-0` beside the px-1.5. */
.ms-screen--phone .ms-doc-title {
  padding: 0;
  font-size: 28px;
  line-height: 34px;
}

/* No pinned quick-actions row under the title as of 2026-09-09 — see the
   fragment's WHAT IS DELIBERATELY NOT DRAWN. The `.ms-actions` / `.ms-action`
   / `.ms-agent` rules and the purple and red badge tones only that row read
   left with it; the gray tone stays for the table's unit chips. */

/* -------------------------------------------------------------------------
   The embedded views app.
   ------------------------------------------------------------------------- */

/* The block takes what the title block leaves and clips: `hostHeight="content"`
   means the app lets this grow and the document page scroll, and a device has
   no scroll. Overriding `.ms-pad`'s `flex: none` is what puts the cut at the
   screen's bottom edge rather than at the block's own content height. */
.ms-views {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The app has nothing here — `DocumentContent` carries no top margin, and the
     room under the title used to come from the pinned property row's own
     `mt-6` (and, until 2026-09-09, the quick-actions row's `mt-2` and its
     32px). With both cut the title and the tab strip butt together, so the 24
     goes back by hand. The same landing-page call hero-mockup.css records, and
     the only reason it is not simply the app's value is that the app has none. */
  margin-top: 24px;
}

.ms-views-head {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 8px 0; /* pt-1 px-2; pb-2 rides the action bar, which is off */
  margin-bottom: 8px; /* mb-2 */
  /* The row is as tall as its tallest control, and that is the settings trigger
     (`size-9`) rather than the tab pill, which is shorter — see below. */
  min-height: 40px;
}

/* The phone hands the page's own gutter to the view blocks:
   `--view-content-inline-padding: 0px`, so a table under a title is not
   stepped in past it. */
.ms-screen--phone .ms-views-head,
.ms-screen--phone .ms-table {
  padding-left: 0;
  padding-right: 0;
}

.ms-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

/* The pill is shorter than the row it sits in, and it is the one length in
   these screens taken off a render rather than off a class. `getTabTriggerClass`
   asks for `h-9` (36), and the shipped tab measures 29.5 in a 1:1 screenshot
   whose table rows in the same image measure 36 + 1px of rule — which is what
   an *unconstrained* `TabsTrigger` comes to (`border` 1 + `py-1` 4, twice,
   around `text-sm`'s 20px line box). Same reading hero-mockup.css records. */
.ms-tab {
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px; /* px-3 */
  border-radius: 999px;
  color: var(--ms-text-sec); /* text-muted-foreground */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* data-[state=active]: bg-foreground/10, which --ms-line already is. */
.ms-tab[data-active] {
  background: var(--ms-line);
  color: var(--ms-text);
}

/* -------------------------------------------------------------------------
   The Items table.

   Cell hairlines are drawn per cell (`border-b` on the cell, not the row) so a
   sticky pinned column's background cannot mask them, and the VERTICAL rules
   are `show_vertical_lines` — saved true on this view — applied to every field
   cell in the BODY alone: `sortable-header.tsx` gives a `columnheader` a right
   edge only as a pinned column's boundary, and this view pins none.

   The select gutter FLOATS (`data-floating-gutter`): the app puts
   `{ width: calc(100% + 32px), marginLeft: -32px }` on the table, so the 32px
   select column hangs off into the page's inline padding, the first field
   column starts flush with the table's own box — under the leading tab pill —
   and no rule crosses the gutter in either direction.
   ------------------------------------------------------------------------- */

.ms-table {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 8px; /* px-2 — what the floating gutter is measured from */
}

.ms-row {
  display: flex;
  align-items: stretch;
  flex: none;
  width: max-content;
  min-width: 100%;
  /* The gutter hangs off into the page's padding and costs the columns nothing. */
  margin-left: -32px;
}

.ms-gutter {
  width: 32px;
  flex: none;
}

.ms-tbody {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ms-thead {
  height: 36px; /* TABLE_HEADER_HEIGHT */
  background: var(--ms-surface);
}

/* On the cells rather than the row, `first:shadow-none` leaving the floating
   gutter bare. An inset shadow rather than a border so the sticky header group
   keeps its exact height. */
.ms-thead .ms-cell {
  box-shadow: inset 0 -1px 0 0 var(--ms-rule);
}

.ms-tr {
  height: 36px; /* the unwrapped row height */
}

.ms-cell {
  display: flex;
  align-items: center;
  gap: 8px; /* gap-2 */
  min-width: 0;
  padding: 0 8px; /* p-2 */
  overflow: hidden;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 0 var(--ms-rule);
}

.ms-thead .ms-cell svg {
  color: var(--ms-text-sec);
}

.ms-tr .ms-cell:not(.ms-cell--add) {
  box-shadow: inset 0 -1px 0 0 var(--ms-rule), inset -1px 0 0 0 var(--ms-rule);
}

.ms-num {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

/* The add-column column: `flexGrow: 1`, empty cells, and a header holding one
   size-7 button with a size-5 plus. Not a hover state — it is only hidden on a
   published site. Excluded from the vertical rules by the app itself. */
.ms-cell--add {
  flex: 1;
  min-width: 48px; /* ADD_FIELD_MIN_WIDTH */
  padding: 0 4px;
}

.ms-add-col {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ms-text-dim);
}

.ms-add-col svg {
  width: 20px;
  height: 20px;
}

/* `Color`-kind document icons render as a tinted badge: `rounded px-1.5
   leading-5 text-sm`, a 4px corner and no vertical padding. The Units
   collection carries `icon_type: "color"`, which is the first branch
   `DocumentPkAvatar` tests. */
.ms-chip {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--ms-chip-bg);
  color: var(--ms-chip-fg);
  line-height: 20px;
  white-space: nowrap;
}

/* The app's badge palette, converted from oklch. `gray` is what a unit whose
   stored key is "grey" falls back to — `isDocumentIconColor` rejects the
   British spelling and `--default-badge` takes over, which items-mockup.mjs
   records at length. */
.ms-mockup .ms-chip,
.ms-mockup [data-tone='gray'] {
  --ms-chip-bg: rgb(84 72 49 / 0.15);
  --ms-chip-fg: #1d1b16;
}

:root[data-theme='dark'] .ms-mockup .ms-chip,
:root[data-theme='dark'] .ms-mockup [data-tone] {
  --ms-chip-fg: rgb(255 255 255 / 0.87);
}

:root[data-theme='dark'] .ms-mockup .ms-chip,
:root[data-theme='dark'] .ms-mockup [data-tone='gray'] {
  --ms-chip-bg: #7f7f7f;
}

/* =========================================================================
   Card 4: the document header's SHARE popover, open on Publish.

   No device — this card is one control and the panel it opens, drawn 1:1 in
   the app's own pixels under `--ms-zoom-share`, the way /bid's #context card
   draws the price cell and its popover. The fragment's own block carries the
   reasoning; what follows is the drawing.

   Sources: features/documents/components/header-actions/share-page.tsx (the
   trigger, the tab bar), features/sharing/components/panel.ts (the 380px
   width, SHARE_TAB_TRIGGER_CLASS), features/publications/components/
   publish-website-panel.tsx (the published panel),
   features/publications/components/live-badge.tsx (the dot),
   components/ui/popover.tsx (the surface, PopoverGroup, PopoverSeparator),
   components/menus/{menu-item,menu-lable}.tsx (the rows and the label).

   THE RADIUS LADDER IS THE APP'S, WHICH IS NOT TAILWIND'S DEFAULT. The app
   anchors it on `--radius: 0.625rem`, so `rounded-sm` is 6, `rounded-md` 8,
   `rounded-lg` 10 and `rounded-xl` **14** — the popover's own corner.
   ========================================================================= */

/* The `.ms-mockup` rule above says `display: block`; this ties with it at
   (0,1,0) and wins on order, which is what centres the block down the plate. */
.ms-mockup--share {
  --ms-popover: var(--ms-surface); /* the app's `--popover: var(--background)` */

  display: flex;
  align-items: center;
}

/* The DRAWN box. `.ms-sh-sheet` inside it is 268 x 378 of app pixels under one
   `transform: scale()` about its top-left, so the sheet's layout box overflows
   this one while its paint fills it exactly — which is what lets the block be
   centred without re-solving a single length inside it. Both numbers are the
   fragment's `SHARE_W` and `SHARE_H`; a test pins the pair.

   It renders 233.96 x 329.99, which puts it on the captured figure's own
   `--demo-pad` — 24.00 above and below at EVERY width, the scale being solved
   for exactly that, and 24.27 either side at 1440. That is the same 24 the
   three devices' `top` sits on and the same 24 their `left` clamp's min arm
   sits on, so the four graphics in this row start and end on one line.

   `margin-inline: auto` is `.bk-fit`'s and `.be-fit`'s, and it is also the
   devices' own `left: clamp(24 + halfW, 50%, …)` said in one property: auto
   margins absorb POSITIVE free space only, so the block centres in every plate
   wide enough to hold it and sits flush, cropping, in the one band that is not
   (1140-1190, where the plate is 232.5 against this block's 233.96 — 0.7px a
   side). Stretching it instead would walk every length inside off the app's. */
.ms-sh-fit {
  flex: none;
  width: calc(268px * var(--ms-zoom-share));
  height: calc(378px * var(--ms-zoom-share));
  margin-inline: auto;
}

.ms-sh-sheet {
  display: flex;
  flex-direction: column;
  /* `align="end"`: the panel's right edge is the trigger's, so the button sits
     in the block's top-right corner, where a document header puts it. */
  align-items: flex-end;
  width: 268px;
  transform: scale(var(--ms-zoom-share));
  transform-origin: 0 0;
}

/* -------------------------------------------------------------------------
   The trigger. `Button variant="ghost" className="h-9 gap-1.5 rounded-full
   px-3 text-muted-foreground-opaque"`, drawn in the state the ghost variant
   gives it while its popover is open — `data-[state=open]:bg-hover
   data-[state=open]:text-foreground`. Drawing that state is what makes the
   button and the panel read as one gesture rather than two stacked boxes.
   ------------------------------------------------------------------------- */

.ms-sh-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* gap-1.5 */
  height: 36px; /* h-9 */
  padding: 0 12px; /* px-3 */
  border-radius: 9999px; /* rounded-full */
  font-size: 14px; /* text-sm */
  font-weight: var(--font-weight-medium);
  background: var(--ms-hover); /* data-[state=open]:bg-hover */
  color: var(--ms-text); /* data-[state=open]:text-foreground */
}

/* -------------------------------------------------------------------------
   `LiveDot` — a `size-2` emerald dot under an `animate-ping` halo of the same
   colour at 60 %. The app draws it three times — on the trigger, beside the
   Publish tab and at the head of the link row — and this card draws it ONCE,
   beside the Publish tab, at the owner's direction: three identical green dots
   in one 268px panel read as three separate alerts rather than as one page
   being live, and the tab is the one of the three that says WHICH state is
   live. Both other call sites are a `liveDot()` away in the fragment.

   The halo's RESTING keyframe sits full-size and 60 % opaque directly under
   the solid dot, so with the animation switched off this is one green dot and
   nothing else — which is why `prefers-reduced-motion` is a single
   `animation: none` with no second set of values.
   ------------------------------------------------------------------------- */

.ms-live {
  position: relative;
  flex: none;
  width: 8px; /* size-2 */
  height: 8px;
}

.ms-live__ping {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #10b981; /* emerald-500, fixed in both themes */
  opacity: 0.6;
  animation: ms-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ms-live__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #10b981;
}

@keyframes ms-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-live__ping {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   The popover. `PopoverContent` is `rounded-xl bg-popover shadow-popover` with
   no border at all — the ring is the third layer of `--popover-shadow`, which
   is the one shadow here that cannot come off a theme token because it has to
   stay black in both. `style={{ width: SHARE_PANEL_WIDTH }}`, applied inline
   in the app "so the box never depends on that exact class having been
   generated"; 380 is not this file's number to move.

   `sideOffset` is `PopoverContent`'s own default, 4.

   The two scroll fades are NOT drawn: they are a 10px gradient at each end of
   a scroller, and this panel is `scrollable={false}` with nothing to scroll.
   ------------------------------------------------------------------------- */

.ms-sh-pop {
  /* `SHARE_W`. The app's own `SHARE_PANEL_WIDTH` is 380 and this is the one
     length on the card that is not the app's — it is what the type's size is
     bought with, and it is solved between the tick's ceiling and the widest
     row's floor in the fragment. Two things reflow at 268 and both are the
     app's own markup doing its job: the URL's `truncate` ellipsises, and the
     note wraps to two lines. */
  width: 268px;
  margin-top: 4px; /* sideOffset */
  border-radius: 14px; /* rounded-xl = --radius + 4 */
  background: var(--ms-popover);
  overflow: hidden;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 14px 28px -6px,
    rgba(0, 0, 0, 0.06) 0 2px 4px -1px,
    rgba(84, 72, 49, 0.08) 0 0 0 1px;
}

/* `<div className="flex h-10 shrink-0 items-center border-b border-border
   px-2">` around a `TabsList variant="line" className="h-auto gap-0.5
   rounded-none bg-transparent p-0"`. Forty INCLUDING the rule, `box-sizing:
   border-box` being what the app draws under too. */
.ms-sh-tabs {
  display: flex;
  align-items: center;
  gap: 2px; /* gap-0.5 */
  height: 40px; /* h-10 */
  padding: 0 8px; /* px-2 */
  border-bottom: 1px solid var(--ms-line);
}

/* SHARE_TAB_TRIGGER_CLASS: `rounded-sm px-2 py-1 text-sm font-medium
   text-secondary`, active taking `text-foreground` on a transparent fill. */
.ms-sh-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* gap-1.5 */
  padding: 4px 8px; /* py-1 px-2 */
  border-radius: 6px; /* rounded-sm */
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--ms-text-sec);
}

.ms-sh-tab--on {
  color: var(--ms-text);
}

/* `after:bottom-[-7px] after:left-2 after:right-2 after:h-0.5
   after:bg-foreground`. The trigger is 28 tall centred in the row's 39px
   content box, so its own bottom is at 33.5 and the underline lands at 40.5 —
   which is the row's bottom rule, and the underline is drawn over it. */
.ms-sh-tab--on::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -7px;
  height: 2px;
  background: var(--ms-text);
}

/* `PopoverGroup` is `p-2 shrink-0` and every group in this panel adds `px-3`,
   so all three are 8/12. (The last one's `pb-2` is the same 8.) */
.ms-sh-group {
  padding: 8px 12px;
}

/* `PopoverSeparator className="mx-4"`. */
.ms-sh-sep {
  height: 1px;
  margin: 0 16px;
  background: var(--ms-line);
}

/* The live link row: `flex items-center gap-2 rounded-sm px-2 py-1.5` around
   the URL and a `size-8` ghost icon button (the app leads it with a third
   `LiveDot`; see that block). Forty-four tall, which is the button plus the
   row's own padding. */
.ms-sh-link {
  display: flex;
  align-items: center;
  gap: 8px; /* gap-2 */
  padding: 6px 8px; /* py-1.5 px-2 */
  border-radius: 6px; /* rounded-sm */
}

/* `min-w-0 flex-1 truncate text-sm text-muted-foreground`, and the app strips
   the scheme off the URL before printing it. At 268 that `truncate` actually
   fires — 188 app px of room against the URL's own 274 — which is the class
   doing what it is there for rather than a crop taken here. */
.ms-sh-url {
  flex: 1;
  min-width: 0;
  color: var(--ms-text-sec);
}

.ms-sh-copy {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px; /* buttonVariants size="icon-sm" */
  height: 32px;
  border-radius: 9999px;
  color: var(--ms-text-sec);
}

/* `px-2 pb-1 text-xs leading-5 text-secondary`. The app's verbatim string, and
   at 268 it wraps to TWO lines (228 app px of room against its own 322.9),
   which `SHARE_PARTS` accounts for. Nothing here forces or prevents the wrap. */
.ms-sh-note {
  padding: 0 8px 4px;
  font-size: 12px; /* text-xs */
  line-height: 20px; /* leading-5 */
  color: var(--ms-text-sec);
}

/* `MenuLabel`: `py-1.5 px-2` around a `text-sm font-medium text-secondary`. */
.ms-sh-label {
  padding: 6px 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--ms-text-sec);
}

/* `MenuItem`: `h-8 px-2 py-2 gap-2 rounded-sm text-sm`, with its glyphs at
   `size-5` in `text-muted-foreground-opaque`. The fixed height is what the
   `py-2` yields to; same row `bid-hero-mockup.css` already reads off this
   component. */
.ms-sh-row {
  display: flex;
  align-items: center;
  gap: 8px; /* gap-2 */
  height: 32px; /* h-8 */
  padding: 0 8px; /* px-2 */
  border-radius: 6px; /* rounded-sm */
}

.ms-sh-row svg {
  width: 20px; /* size-5 */
  height: 20px;
  color: var(--ms-text-sec);
}

.ms-sh-row__label {
  flex: 1;
  min-width: 0;
}

/* The tick is the one glyph in these rows carrying its own size AND its own
   colour — `<Check className="size-4 text-primary" />` — so it escapes both of
   `MenuItem`'s arbitrary variants and is stated here. It ties with the rule
   above at (0,1,1) and wins on order; keep it below. */
.ms-sh-check {
  flex: none;
  display: flex;
}

.ms-sh-check svg {
  width: 16px; /* size-4 */
  height: 16px;
  color: var(--ms-accent); /* text-primary */
}

/* `<span className="text-xs text-secondary">Published …</span>`. */
.ms-sh-when {
  flex: none;
  font-size: 12px;
  color: var(--ms-text-sec);
}

/* -------------------------------------------------------------------------
   The pointer, on the trigger it opened. The product's own demo cursor, held
   at a FIXED SIZE ON SCREEN by dividing the card's scale back out — a pointer
   is on the page rather than inside the app, the rule `.bx-cursor` and
   `.bx-price__cursor` already follow. Its tip sits at 76/512 of its own box,
   which is what the two subtractions are; 33 / 21 is a little past the middle
   of the button, i.e. where a click lands. It was 40 while the trigger carried
   its own `LiveDot` and so measured 76; without the dot and its gap the button
   is 62, and a tip left at 40 sits two thirds across it. Re-solve against the
   button's own width, measured, whenever what is in it changes.
   ------------------------------------------------------------------------- */

.ms-sh-cursor {
  --ms-sh-cursor-size: calc(22px / var(--ms-zoom-share));

  position: absolute;
  z-index: 2;
  left: calc(33px - var(--ms-sh-cursor-size) * 0.1484);
  top: calc(21px - var(--ms-sh-cursor-size) * 0.1484);
  width: var(--ms-sh-cursor-size);
  height: var(--ms-sh-cursor-size);
  /* The asset's own `feDropShadow dx=7 dy=9 stdDeviation=7` in #4B5563 at 22%,
     restated at the size it is drawn. */
  filter: drop-shadow(0 1px 1.5px rgb(75 85 99 / 0.22));
}

.ms-mockup .ms-sh-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-mockup .ms-sh-cursor path {
  fill: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

/* The asset's two rings: a `#C9CDD3` 38 under a `#FAFAFA` 30, over a black
   fill. Both widths are user units on its own 512 viewBox, so
   `non-scaling-stroke` has to come back off. */
.ms-mockup .ms-sh-cursor path:first-child {
  stroke: #c9cdd3;
  stroke-width: 38;
}

.ms-mockup .ms-sh-cursor path:last-child {
  stroke: #fafafa;
  stroke-width: 30;
}

/* The app's dark `--popover` is oklch(0.26 0 0) = #242424, which is this
   site's `--color-theme-card-02-hex` — the same mapping `bid-context.css`
   makes for the price popover. */
:root[data-theme='dark'] .ms-mockup--share {
  --ms-popover: var(--color-theme-card-02-hex);
}

/* `--popover-shadow`'s dark half, verbatim: the ambient pools deepen and the
   1px ring flips to white at 9.4 %, a black ring reading as nothing on a dark
   surface. */
:root[data-theme='dark'] .ms-sh-pop {
  box-shadow:
    rgba(0, 0, 0, 0.2) 0 14px 28px -6px,
    rgba(0, 0, 0, 0.12) 0 2px 4px -1px,
    rgba(255, 255, 255, 0.094) 0 0 0 1px;
}
/*
 * /manage — "The job on time", cards 1 and 2. Hand-maintained; pairs with
 * tools/fragments/manage-timeline.mjs, imported by /manage and by the temporary
 * card gallery (which harvests these cards onto every page).
 *
 * WHAT CARD 1 IS: the app's timeline CANVAS — the tick tier over five rows of
 * phased bars, the red today pill and line — with the pane scrolled off its
 * left edge, at the owner's direction (2026-09-10: "there is not enough
 * horizontal space … instead lets just show 3 or 4 rows with timeline bars
 * on them"). It is schedule-mockup.css' port of the same app surfaces
 * (`.sc-plot` / `.sc-bar` / `.sc-pcell` / `.sc-today-*`), FORKED under `mt-`
 * at this card's `13 / 14` rather than that window's 0.75, so the app's
 * `text-sm` renders at the 13px this page's own product ladder is set in.
 * Per the fork rule a change that belongs to both is made twice, on purpose;
 * a test fails if a `sc-` (or any sibling) prefix appears here.
 *
 * EVERY LENGTH IS THE APP'S OWN NUMBER under one `transform: scale(--mt-fit)`
 * from the stage's top-left: a 32px tick tier, a 34px bar, 84px week buckets,
 * an 11px strip — bar ONE: the row is 42 where the app's is 36, three px of
 * air a side of the bar at the owner's direction. Do not scale one by hand;
 * the fragment states each number beside its source.
 *
 * TWO MORE DEPARTURES, BOTH 2026-09-10 AND BOTH THE OWNER'S: the week grid
 * draws no rule on either cut edge of the canvas (`.mt-grid`, below), so the
 * timeline reads as infinite rather than boxed; and today sits a third across
 * with two open weeks after it, which is the room a planned animation extends
 * a bar into. The fragment header carries the reasoning for all three.
 *
 * `.mt-fit` IS THE SCALED BOX AND `.mt-stage` THE UNSCALED ONE, which is
 * bid-capabilities.css' `.bk-fit` arrangement and for its reason: the fit
 * box is sized to what the drawing RENDERS (`W * fit`, emitted inline by the
 * fragment) and centres on `margin-inline: auto`, which absorbs positive free
 * space only — so the block is centred in a plate wider than it and flush
 * left in one narrower. The stage inside is the app's own pixels scaled from
 * `0 0`. Card 1 renders 312 x 224.7 on a 391.66 x 378 plate at 1440, i.e.
 * 39.8 of air a side and 76.6 above and below, and is never cropped (6.5 a
 * side in the 325 band).
 *
 * THE TODAY LINE IS OVER THE BARS (z-20 against the bar's 2) where the app
 * puts it under them: on a stack of rows the app's order is a column of red
 * dashes in the gaps between bars. schedule-mockup.css makes the same call.
 *
 * CARD 2 USES NONE OF THAT. It REPRODUCES /bid's #capabilities list — the
 * capture's own seven-row stack, its rows imported from that file — so it is
 * drawn 1:1 in card pixels on the capture's own utilities out of `cloud.css`,
 * and all this file owns for it is `.mt-list`. It carries no badge, no
 * tooltip and no pointer; see the fragment header for why.
 */

.mt-fit {
  /* bid-context.css' token set, less the popover's. */
  --mt-surface: var(--color-theme-bg);
  --mt-line: var(--color-theme-border-02);
  --mt-text: var(--color-theme-product-text);
  --mt-text-sec: color-mix(in srgb, var(--color-theme-fg) 60%, var(--color-theme-bg));
  /* The bar's `bg-popover`, which in light is literally the page background —
     a step lighter than the card-02 plate, so the bar reads as lifted off the
     canvas. Restated in dark at the foot of the file, where `--popover` maps
     to the plate's own token and would vanish. */
  --mt-bar: var(--mt-surface);
  /* `--red`, the app's own converted from oklch — the today pill. Both themes
     stated, the app carrying a lighter red in dark. */
  --mt-red: #e1584d;

  /* ONE SCALE FOR BOTH CARDS, AND IT IS THE #context ROW'S: `13 / 14`, so the
     app's body type lands at the 13px `--text-product-lg` this page's own
     cards are set in, its `text-xs` at 11.14, the strip's 11 at 10.2. Card 3
     is drawn at the same scale by its own file. Re-solve against the type,
     not against air. */
  --mt-fit: 0.9286;

  display: block;
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--mt-text);
  font-family: var(--font-system);
  font-size: 0.875rem; /* text-sm */
  line-height: 1.4286;
}

.mt-fit * {
  box-sizing: border-box;
}

/* A `<span>` is inline; every box here is one, so the default is undone once.
   `:where()` contributes no specificity, so this cannot outrank the
   single-class layout rules under it — the trap automate-hero-mockup.css paid
   a build for. */
.mt-fit :where(span) {
  display: block;
}

.mt-fit svg {
  display: block;
  flex: 0 0 auto;
}

/* The app's pixels, scaled once from the top-left corner. The fit box above is
   already the scaled size, so nothing here moves a layout box. */
.mt-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  transform: scale(var(--mt-fit));
  transform-origin: 0 0;
}

/* The strip's cells ellipsise as the app's do (`overflow-hidden` on a
   `px-0.5` bucket) — at 84px nothing here ever needs to. */
.mt-ell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   The canvas — the tick tier over the rows of plot, the today line down them.
   ------------------------------------------------------------------------- */

.mt-canvas {
  position: relative;
  flex: none;
  overflow: hidden;
}

.mt-ticks {
  position: relative;
  height: 32px; /* TICK_HEIGHT */
  border-bottom: 1px solid var(--mt-line);
}

/* `absolute inset-y-0 flex items-center justify-center text-xs
   text-muted-foreground`, one per week at the `quarter` zoom, labelled with
   its Sunday's day of the month. */
.mt-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-text-sec);
  font-size: 0.75rem; /* text-xs */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Today: `-translate-x-1/2` on the column's middle, a `size-[22px]
   rounded-full bg-red text-[11px] font-medium text-white` pill. */
.mt-today-pill {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.mt-today-pill > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--mt-red);
  color: #fff; /* text-white, in both themes */
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

/* The rows, and the today line's containing block. */
.mt-rows {
  position: relative;
}

/* A row of plot, holding the bar. 42 where VIEW_TABLE_ROW_HEIGHT is 36: the
   six extra px are ROW_AIR, three a side of the 34px bar, so the stacked
   bars stop reading as one block (the owner's report, 2026-09-10). The bar's
   own height is untouched. */
.mt-plot {
  position: relative;
  height: 42px; /* VIEW_TABLE_ROW_HEIGHT 36 + 2 * ROW_AIR */
  border-bottom: 1px solid var(--mt-line);
}

/* The week grid (`getTimelineGridStepPx` is `pxPerDay * 7` at week ticks),
   one rule per bucket edge INSIDE the crop, emitted by the fragment off the
   ticks. It was a repeating `background-image` from 0 on every plot, which
   drew a rule on the canvas' left cut and a sliver of one on its right — a
   boxed table where the owner wants a timeline that runs on past both edges
   ("we want it to look infinite", 2026-09-10). Under the bars (z 1 against
   the bar's 2), as the app's grid is. */
.mt-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 1px;
  background: var(--mt-line);
  pointer-events: none;
}

/* The today line, down every row. OVER the bars, deliberately — see the head
   of the file — so it is the one thing that says where the actuals stop. */
.mt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 1px;
  background: var(--mt-red);
  pointer-events: none;
}

/* `rounded-[8px] border border-border/60 bg-popover shadow-sm`, BAR_HEIGHT 34
   on `(ROW_HEIGHT - BAR_HEIGHT) / 2`. Cut by the crop where a bar runs past
   the four weeks on screen, which is what a timeline scrolled to today
   looks like. */
.mt-bar {
  position: absolute;
  z-index: 2;
  height: 34px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mt-line) 60%, transparent);
  border-radius: 8px;
  background: var(--mt-bar);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

/* `TimelinePhasedStrip`'s root: `relative h-full w-full select-none
   text-[11px] leading-none tabular-nums`. */
.mt-strip {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* One bucket: `absolute inset-y-0 flex items-center justify-center
   overflow-hidden px-0.5 border-r border-border/40 last:border-r-0`, and by
   default the ESTIMATE treatment — `estimatedValueClassName`, `italic
   text-foreground/50`. The italic is half the signal and not decoration;
   nothing in the app sets one without the other. */
.mt-pcell {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 2px; /* px-0.5 */
  font-style: italic;
  color: color-mix(in srgb, var(--mt-text) 50%, transparent);
}

/* THE BUCKET SEPARATOR IS A PSEUDO-ELEMENT AND NOT THE APP'S `border-r`, AND
   IT IS INSET BY THE BAR'S OWN CORNER RADIUS. The app draws it edge to edge,
   which inside a 34px bar is a rule running into both rounded corners — five
   stacked bars then read as a grid of boxed cells rather than as one bar with
   its periods marked, which is what was reported (2026-09-10). A `border`
   cannot be inset, so the rule moves to `::after`; its ink and weight are
   still the app's `border-border/40` at 1px.
   THE 8 IS `.mt-bar`'s OWN `border-radius`, so the rule stops exactly where
   the bar's corner curve would begin — 18px of rule bracketing an 11px line
   of type. Re-solve it against that radius, do not nudge it. */
.mt-pcell::after {
  content: none; /* OFF — see below */
  position: absolute;
  top: 8px; /* .mt-bar's border-radius */
  right: 0;
  bottom: 8px;
  width: 1px;
  background: color-mix(in srgb, var(--mt-line) 40%, transparent);
}

/* THE SEPARATOR IS OFF AS OF 2026-09-10, at the owner's direction — the bar
   is drawn with no bucket rules in it at all. Turn it back on by restoring
   `content: ''` above; nothing else has to move. What still shows between the
   bars is `.mt-grid`, the week rules on the canvas, which the bar's own fill
   covers wherever a bar lies over one. */

/* ...and the ACTUAL. `cell.manual` — the bucket IS a pin — is drawn
   `font-medium text-foreground/85`, upright, heavier and at nearly full ink.
   Every bucket left of the red line is one; every bucket from today's on is
   the estimate above. */
.mt-pcell[data-manual] {
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: color-mix(in srgb, var(--mt-text) 85%, transparent);
}

.mt-pcell:last-child::after {
  content: none;
}

/* -------------------------------------------------------------------------
   CARD 2 — the captured list, hand-drawn.

   /bid's #capabilities list is a capture; /manage has no such figure, so this
   is a restatement of it (see the fragment header for every value it reads
   off the built page). Everything structural is the capture's own Tailwind
   utilities, which `cloud.css` already emits — so all this file owns is the
   root, the box-sizing the capture gets from its own preflight, and the one
   token the shared badge and pointer rules read.
   ------------------------------------------------------------------------- */

.mt-list {
  font-family: var(--font-system);
}

.mt-list * {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Dark. The bar's `--popover` maps to card-02 in dark, which is the plate's
   own token here, so the bar takes the first fill that reads as lifted off
   it — two steps up, the call bid-activities.css makes for its badge. The
   red is the app's own dark value.
   ------------------------------------------------------------------------- */
:root[data-theme='dark'] .mt-fit {
  --mt-bar: var(--color-theme-card-04-hex);
  --mt-red: #ee685a;
}
/*
 * /manage — "Stay ahead of the job", card 2. Hand-maintained; pairs with
 * tools/fragments/manage-change-order.mjs, imported by /manage and by the
 * temporary card gallery (which harvests this card onto every page).
 *
 * WHAT IT IS: one turn of the app's chat conversation — a trigger bubble, the
 * thought steps it set off, two paragraphs and the document the turn returns —
 * drawn BARE on the plate, with no chat window around it. The AVATAR and the
 * `Hide thinking` header came off on 2026-09-10 at the owner's direction and
 * their rules are DELETED rather than dormant; the fragment's header carries
 * the reasoning. It is the sixth fork of the hero chat pair (hero-chat.css,
 * bid-hero-chat.css, automate-hero-chat.css), under `mc-`; per the fork rule a
 * change that belongs to both is made twice, on purpose, and a test fails if a
 * sibling prefix appears here.
 *
 * EVERY LENGTH IS THE APP'S OWN NUMBER, at 1:1, under one
 * `transform: scale(--mc-fit)` about the block's CENTRE — so the layout box
 * does not move and the plate's own `items-center` still centres it, which is
 * what makes the card cost the page no height. Do not scale a length by hand.
 *
 * THE SCALE IS SOLVED OFF TYPE AND IT IS NOT THE ROW'S 13 / 14. Chat prose is
 * `.font-message`, 16, where a view's chrome is `text-sm` 14 — so 13 / 16 is
 * what puts the answer on this page's own `--text-product-lg` (13). The chrome
 * tier then lands at 11.375, within a quarter pixel of card 1's tick labels
 * (12 x 13/14 = 11.14), so the row still reads at one ladder. Re-solve against
 * the type, never against air.
 *
 * The block is 384 app px wide, i.e. 312 rendered — card 1's own rendered width
 * to the pixel, 39.8 of air a side on the 391.66 plate at 1440.
 */

.mc-fit {
  /* Ink and rules, this page's own tokens. `-sec` and `-dim` are mixed against
     the plate rather than taken at alpha, for the reason bid-surfaces.css gives:
     a lucide glyph is several strokes and two translucent ones composite a step
     darker wherever they cross. */
  --mc-plate: var(--color-theme-card-02-hex);
  --mc-text: var(--color-theme-product-text);
  --mc-text-sec: color-mix(in srgb, var(--color-theme-fg) 60%, var(--mc-plate));
  --mc-text-dim: color-mix(in srgb, var(--color-theme-fg) 40%, var(--mc-plate));
  --mc-line: var(--color-theme-border-02);
  /* THE CARD'S ONE ACCENT, and it is the trigger's alert mark. The app's own
     `--orange-primary` converted from its oklch — the same pair
     `bid-capabilities.css` carries, copied rather than shared per the fork
     rule, and restated in dark at the foot of the file. `--primary` lived here
     for a `DatabaseZap` that came off on 2026-09-10; a mark naming the block
     says a flow ran, where this one names the condition it fired on. */
  --mc-orange: #e48900;
  /* The document card's fill and its sheet. The app draws them `bg-hover-opaque`
     over `bg-background`; here the PLATE is already card-02, which is the value
     the app's card takes in light, so the card steps a rung DOWN off the plate
     and the sheet a rung up off the card. Keep the relationship, not the token —
     dark inverts the ladder and is restated at the foot of the file. */
  --mc-doc-bg: var(--color-theme-card-03-hex);
  /* The trigger bubble sits on the SAME rung as the returned document, which is
     what the capture's own turn does (its ask and its card are both card-04 on
     a card-03 plate). One value, so the two ends of the turn cannot drift and
     dark needs no second restatement. */
  --mc-ask-bg: var(--mc-doc-bg);
  --mc-doc-paper: var(--color-theme-bg);
  --mc-cursor-edge: #fff;
  --mc-cursor-body: #1a1a1a;

  display: block;
  flex: none;
  box-sizing: border-box;
  transform: scale(var(--mc-fit));
  color: var(--mc-text);
  font-family: var(--font-system);
  font-size: 1rem; /* .font-message 16 */
  line-height: 1.5; /* 24 */
  text-align: left;
  cursor: default;

  /* 13 / 16 — see the header. */
  --mc-fit: 0.8125;
}

.mc-fit * {
  box-sizing: border-box;
}

/* A `<span>` is inline; every box here is one, so the default is undone once.
   `:where()` contributes no specificity, so this cannot outrank the
   single-class layout rules under it — the trap automate-hero-mockup.css paid a
   build for. */
.mc-fit :where(span) {
  display: block;
}

/* Lucide — 24 viewBox, no fill, round caps, the box the only size control.
   `non-scaling-stroke` makes the 1 mean device pixels rather than 2 user units
   scaled by the box, so every glyph here is a true hairline; it does not
   inherit, so it goes on the shapes. */
.mc-fit svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-fit svg :where(*) {
  vector-effect: non-scaling-stroke;
}

.mc-ell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-thread {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
}

/* -------------------------------------------------------------------------
   The trigger — this card's own; see the fragment header. Everything it names
   is real (`bidlo.dataTrigger`, its own DatabaseZap), the row is not.

   IT IS THE CAPTURE'S OWN ASK BUBBLE AS OF 2026-09-10, at the owner's
   direction: a bordered box at the thread's message size, which is the shape
   every other chat graphic on this site opens on (`.cx-turn__ask`,
   `stepsCard`). It was a hairline PILL at `text-sm` until then, i.e. the one
   opener with a shape of its own.

   ITS TWO RUNS ARE ONE INK AT ONE WEIGHT. It shipped for one build with the
   label at `font-medium` and the subject a step back, and the reference has
   neither. So the two runs are plain `inline` (the file's `:where(span)`
   blockifier contributes no specificity, so a single class wins) inside one
   wrapping text box.

   THE BOX IS `.cx-turn__ask`'s, AND IT IS THE ONE PLACE IN THIS FILE WHERE A
   LENGTH IS NOT THE APP'S OWN NUMBER. /custom-apps' #build card 1 draws the
   same object — the capture's ask bubble — and the owner named it as the
   styling this one should carry. That card is drawn 1:1, so its box IS its
   rendered box; ours is drawn in app pixels and scaled 0.8125, so writing the
   app's 8 / 12 / 1 / 8 here rendered them at 6.5 / 9.75 / 0.81 / 6.5 — the
   same bubble ~19% tighter, which is what was reported. Every length in this
   rule is therefore a RENDERED pixel divided back out by the scale
   (`--mc-ask-px`), the idiom `bid-capabilities.css`' `--bk-type-lg` and
   `bid-context.css`' `.bx-cursor` already use, so the two bubbles land on the
   same numbers whatever `--mc-fit` becomes. **Re-measure against
   `.cx-turn__ask`, never against this file's own values.**

   The leading follows for the same reason: the reference is
   `--leading-product-base` (1.3333) where the app's chat prose is 1.5, so a
   one-line bubble here stood 42 app px against the reference's 35 rendered.

   IT FILLS THE BLOCK, at the owner's direction, and that is the reference's
   own arrangement too: `.cx-turn__ask` spans its whole stage while the steps
   and the returned card sit INSIDE it (`pl-2`). So the bubble takes the 384px
   block edge to edge and `.mc-doc` keeps the app's own `max-w-[340px]`, which
   is what makes a real filename wrap to two lines. It was `width: fit-content`
   until 2026-09-10 — the one thing in the thread whose right edge landed
   wherever its string ended — and then briefly capped at `.mc-doc`'s 340,
   which the reference's padding will not fit a one-line label inside.

   THE MARK IS AN ALERT, NOT THE BLOCK'S ICON. lucide `TriangleAlert` in
   `--mc-orange`, the app's own `--orange-primary`, at a rendered 16 like every
   other length in this box. `bidlo.dataTrigger`'s `DatabaseZap` shipped here
   for one build and came off: a mark naming the BLOCK says a flow ran, which a
   reader cannot check, where an alert names the CONDITION the words beside it
   describe. It takes the file's own hairline stroke like every other glyph
   here, and its nudge is solved rather than eyeballed — half the difference
   between the line box (`1.3333em`) and the mark.

   Radius is `rounded-md`, 8 on the APP's own `--radius: 0.625rem` ladder,
   which is `.cx-turn__ask`'s own; it was `rounded-lg` (10) for one build.
   ------------------------------------------------------------------------- */

.mc-trigger {
  /* One rendered pixel, in this block's own space. See the note above. */
  --mc-ask-px: calc(1px / var(--mc-fit));

  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--mc-ask-px)); /* gap-2 */
  align-self: flex-start;
  width: 100%;
  padding: calc(8 * var(--mc-ask-px)) calc(12 * var(--mc-ask-px)); /* py-2 px-3 */
  /* The one length NOT divided out: a border-width is snapped to a whole
     device pixel, so `calc(1 * var(--mc-ask-px))` is used as 1px anyway.
     Measured either way it paints the same hairline. */
  border: 1px solid var(--mc-line);
  border-radius: calc(8 * var(--mc-ask-px)); /* rounded-md */
  background: var(--mc-ask-bg);
  line-height: 1.33333; /* --leading-product-base */
}

.mc-trigger__mark {
  width: calc(16 * var(--mc-ask-px)); /* size-4, rendered */
  height: calc(16 * var(--mc-ask-px));
  /* Half the difference between the line box and the mark. */
  margin-top: calc((1.33333em - 16 * var(--mc-ask-px)) / 2);
  color: var(--mc-orange);
}

.mc-trigger__text {
  min-width: 0;
}

/* One ink, one weight, wrapping as prose — see the note above. */
.mc-trigger__label,
.mc-trigger__subject {
  display: inline;
}

/* -------------------------------------------------------------------------
   The chain of thought, drawn open. `ChainOfThought` is `w-full space-y-4 pl-1`
   with `-mb-1` while open; each step is `pl-6 pb-3 text-sm` with its dot and
   rail painted by pseudo-elements and its own chevron at `-rotate-90`.

   ITS `Hide thinking` HEADER IS NOT DRAWN, as of 2026-09-10 and at the owner's
   direction: it is a control a still cannot use, and without it the steps sit
   directly under the trigger bubble, which is what says the trigger set them
   off. `space-y-4` and the header's own `-mt-1.5` went with it, so the steps'
   only air above them is the thread's own `gap-2`.

   `pb-4` stays: `ChainOfThoughtContent` takes it whenever the message has text
   under the chain, which this one does, and it is the air between the last step
   and the first line of the answer — without it the two read as one list.
   ------------------------------------------------------------------------- */

.mc-cot {
  padding-left: 4px; /* pl-1 */
  padding-bottom: 16px; /* pb-4, hasTextBelow */
  margin-bottom: -4px; /* -mb-1 */
}

.mc-step {
  position: relative;
  padding-left: 24px; /* pl-6 */
  padding-bottom: 12px; /* pb-3 */
  font-size: 0.875rem; /* text-sm */
  line-height: 20px; /* leading-5 */
  color: var(--mc-text-sec); /* status: complete */
}

.mc-step:last-child {
  padding-bottom: 0;
}

.mc-step::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 6px; /* size-1.5 */
  height: 6px;
  border-radius: 999px;
  background: var(--mc-text-dim);
  opacity: 0.6;
}

.mc-step::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: 7px;
  width: 1px;
  background: var(--mc-text-dim);
  opacity: 0.2;
}

.mc-step:last-child::after {
  display: none;
}

.mc-step__label {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* gap-1 */
  max-width: 100%;
}

.mc-step__chev {
  width: 14px; /* size-3.5 */
  height: 14px;
  color: var(--mc-text-dim);
  transform: rotate(-90deg); /* collapsed */
}

/* -------------------------------------------------------------------------
   The answer. `.notion-prose p` is `min-height:40px; margin:0; padding:8px 2px`,
   and its last child drops both — which is what puts air between two paragraphs
   and none under the last one.
   ------------------------------------------------------------------------- */

/* `MessageContent`'s text part — a plain column; the paragraphs below carry
   everything. `min-width: 0` so a long unbroken run cannot widen the block. */
.mc-prose {
  min-width: 0;
}

.mc-p {
  min-height: 40px;
  margin: 0;
  padding: 8px 2px;
}

.mc-p:last-child {
  min-height: 0;
  padding: 0;
}

/* -------------------------------------------------------------------------
   The returned document — `FileCardShell` in document-file-card.tsx, drawn at
   its own values. (That component is itself a 1:1 port of this site's hero-chat
   card, so the two agree by construction.)

   THE TRAP. `.mc-doc__bar` holds exactly three round children, which is the
   signature `src/scripts/empty-mockups.js` uses to find a window mockup. It is
   safe twice over: that script queries `div` and every box here is a span, and
   the dots are 3px where it requires `width > 4`. Do not grow them past 4px,
   do not make any of this a div, and do not give the bar a fourth child.
   ------------------------------------------------------------------------- */

.mc-doc {
  display: flex;
  align-items: stretch;
  align-self: flex-start;
  width: 100%;
  min-height: 76px; /* min-h-[76px] */
  max-width: 340px; /* max-w-[340px] */
  overflow: hidden;
  border: 1px solid var(--mc-line);
  border-radius: 10px; /* rounded-lg, on the app's own --radius: 0.625rem */
  background: var(--mc-doc-bg);
}

.mc-doc__thumb {
  position: relative;
  flex: none;
  width: 88px; /* w-[88px] */
  overflow: hidden;
}

/* Inset on three sides and running off the bottom, so it reads as a sheet the
   frame crops rather than an icon. */
.mc-doc__page {
  position: absolute;
  top: 10px; /* top-2.5 */
  right: 8px; /* inset-x-2 */
  bottom: 8px; /* bottom-2 */
  left: 8px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--mc-doc-paper);
  box-shadow:
    rgb(0 0 0 / 0.25) 0 2px 8px,
    rgb(0 0 0 / 0.12) 0 0 0 0.5px;
}

.mc-doc__bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px; /* px-1.5 py-1 */
  border-bottom: 0.5px solid color-mix(in srgb, var(--color-theme-fg) 8%, transparent);
}

/* 3px, and see THE TRAP above before changing it. */
.mc-doc__bar i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-theme-fg);
  opacity: 0.15;
}

.mc-doc__lines {
  padding: 4px 6px 0; /* px-1.5 pt-1 */
}

.mc-doc__lines i {
  display: block;
  height: 2px;
  margin-top: 3px; /* space-y-[3px] */
  border-radius: 999px;
  background: var(--color-theme-fg);
}

.mc-doc__lines i:first-child {
  margin-top: 0;
}

/* Filled, two-tone and mirrored — it opts out of the lucide rule above rather
   than reading it, so `fill` and `stroke` are both restated. The two fills
   invert with the theme for the reason every OS inverts its cursor. */
.mc-doc__cursor {
  position: absolute;
  right: 6px; /* right-1.5 */
  bottom: 6px;
  width: 12px; /* size-3 */
  height: 12px;
  fill: currentColor;
  stroke: none;
  transform: scaleX(-1); /* -scale-x-100 */
  filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 0.3));
}

.mc-doc__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px; /* px-3 py-2.5 */
}

/* `line-clamp-2` — the width cap on `.mc-doc` exists so a real filename wraps
   to two lines rather than ellipsising on one. */
.mc-doc__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.375; /* leading-snug */
}

.mc-doc__detail {
  margin-top: 4px; /* mt-1 */
  font-size: 0.75rem; /* text-xs */
  line-height: 1.375;
  color: var(--mc-text-sec);
}

/* =========================================================================
   Dark. The plate is card-02 there too, so the ladder inverts: the document
   card steps UP off the plate rather than down, and its sheet up again by the
   same +12 the light sheet sits above its own card.
   ========================================================================= */

:root[data-theme='dark'] .mc-fit {
  --mc-orange: #e28600;
  --mc-doc-bg: var(--color-theme-card-04-hex);
  --mc-doc-paper: #3a3a3a;
  --mc-cursor-edge: #1a1a1a;
  --mc-cursor-body: #fff;
}

/*
 * /manage's "The job on time" section: card 3, the timeline view's
 * Dependencies settings page.
 *
 * NOT generated by `pnpm run port`. Hand-maintained, imported by the cloud
 * page alone (see `astroPage` in tools/04-generate.mjs) and by
 * `CardGallery.astro`, which harvests these cards and renders them on every
 * page. Pairs with tools/fragments/manage-dependencies.mjs, whose header
 * carries what is drawn, what is omitted and the still's arithmetic; what
 * follows is the drawing.
 *
 * ONE SCALE, AND IT IS THE ROW'S. Every length below is bidlo-light-1.0's own
 * number — the popover's 344, the page's `px-4`, the preview's 150, the bars'
 * boxes off `dependency-preview.module.css` — and the sheet is scaled ONCE, on
 * `.mdp-pop`, by `--mdp-fit`. That is `bid-context.css`'s `--bx-fit`, 13 / 14,
 * restated here rather than shared (the fork rule): it renders the app's
 * `text-sm` at the 13px the other two cards on this row read at, and it is what
 * puts the 344px popover inside the 325px plate of the 1140-1175 band and the
 * 319.69 a 390 viewport gives (319.43 drawn). Do not scale a length by hand;
 * move `--mdp-fit` and re-measure against those two plates.
 *
 * COLOUR. The app's `--popover`, `--hover-opaque`, `--border`, `--foreground`
 * and `--primary` mapped onto this site's tokens the way `manage-surfaces.css`
 * and `bid-context.css` map them — copied, not shared. The gold is a LITERAL
 * in both themes because the app pins it: `dependency-preview.module.css`
 * declares `--dep-gold: #9a7b33` and `#b39041` under `.dark`, and `TONE_CLASS`
 * in `timeline/dependency-arrows.tsx` paints the live connectors
 * `text-[#9a7b33] dark:text-[#b39041]` — one pair, everywhere the app draws a
 * dependency. The two `color-mix()`es on the bars are in oklab for the app's
 * own stated reason: mixing a chromatic colour toward transparent in a polar
 * space drags the hue, and the primary bar comes out pink.
 *
 * THE TRAP. `src/scripts/empty-mockups.js` blanks a window by finding a `<div>`
 * with exactly three small round children. Every box here is a `<span>`, which
 * that script's `div` query cannot reach, and the blockifier is wrapped in
 * `:where()` so it scores nothing against the layout rules under it.
 */

.mdp-mockup {
  /* `--popover` is the page background in light; dark is restated at the foot. */
  --mdp-popover: var(--color-theme-bg);
  /* `--hover-opaque`, the fixed light gray the preview's frame takes. */
  --mdp-hover-opaque: var(--color-theme-card-02-hex);
  /* `--border`. */
  --mdp-line: var(--color-theme-border-02);
  /* `--foreground`, for the bars' inner lines and the pointer's fill. */
  --mdp-fg: var(--color-theme-fg);
  --mdp-text: var(--color-theme-product-text);
  /* `text-secondary`, flattened against the popover the way the sibling sheets
     flatten theirs — a lucide glyph is several paths and alpha doubles where
     they cross; type does not, but one rule for both is one rule. */
  --mdp-text-sec: color-mix(in srgb, var(--color-theme-fg) 60%, var(--mdp-popover));
  /* `--primary`, the app's blue; `--color-theme-*` carries no primary. */
  --mdp-accent: #2483e2;
  /* Pinned by the app in both themes — see the header. */
  --mdp-gold: #9a7b33;
  /* 13 / 14: the app's text-sm at the row's 13. */
  --mdp-fit: 0.9286;

  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-family: var(--font-system);
  color: var(--mdp-text);
}

/* Every box is a span; blockify them without outranking anything below. */
.mdp-mockup :where(span) {
  display: block;
  box-sizing: border-box;
}

/* The DRAWN box: the popover's 344 x 340 under the fit. `.mdp-pop` inside it
   is laid out at app pixels and scaled about its top-left, so its layout box
   overflows this one while its paint fills it exactly — which is what lets the
   plate centre it without re-solving a length inside. `margin-inline: auto`
   is `.ms-sh-fit`'s and `.bk-fit`'s: auto margins absorb positive free space
   only, so the block centres in every plate wide enough for it (all of them,
   by 0.26px at the narrowest). */
.mdp-fit {
  flex: none;
  width: calc(344px * var(--mdp-fit));
  height: calc(340px * var(--mdp-fit));
  margin-inline: auto;
}

/* `[data-slot="popover-content"]`: `rounded-xl bg-popover shadow-popover
   overflow-hidden`, widened to 344 by the page's own style block. 14 is
   `rounded-xl` on the app's `--radius: 0.625rem` ladder. The padding is the
   page's `px-4` and — top and bottom — its `pb-3.5`; see departure 1. */
.mdp-pop {
  display: flex;
  flex-direction: column;
  gap: 8px; /* space-y-2 */
  width: 344px;
  height: 340px;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mdp-popover);
  /* `--popover-shadow`, light: two ambient pools and a 1px ring. */
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 14px 28px -6px,
    rgba(0, 0, 0, 0.06) 0 2px 4px -1px,
    rgba(84, 72, 49, 0.08) 0 0 0 1px;
  transform: scale(var(--mdp-fit));
  transform-origin: top left;
}

/* `px-0.5 text-sm font-medium text-secondary`. */
.mdp-label {
  padding: 0 2px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--mdp-text-sec);
  white-space: nowrap;
}

/* =========================================================================
   The preview: `relative h-[150px] overflow-hidden rounded-lg border
   bg-hover-opaque`, and inside it `dependency-preview.module.css` value for
   value. The scene is drawn on a 310 x 150 viewBox with
   `preserveAspectRatio="none"` — the app's own — so its 148px content box
   takes the 150-unit box and the bars, laid out in the same padding box, sit
   on the same coordinates the connectors are solved in.

   THE BARS ARE LONG, AS OF 2026-09-10 — the one place the scene leaves the
   app's numbers, and the fragment's header says why. Every box below is
   `BARS` in the fragment, restated; a test pins the two together.
   ========================================================================= */

.mdp-preview {
  position: relative;
  flex: none;
  height: 150px;
  overflow: hidden;
  border: 1px solid var(--mdp-line);
  border-radius: 10px; /* rounded-lg */
  background: var(--mdp-hover-opaque);
}

.mdp-mockup .mdp-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* Gridlines. */
.mdp-grid {
  stroke: var(--mdp-line);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

/* Connectors, and the marker's own chevron drawn as a path. */
.mdp-conn {
  fill: none;
  stroke: var(--mdp-gold);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mdp-head {
  fill: none;
  stroke: var(--mdp-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bars. 7 is the module's own literal; the boxes are this card's long ones. */
.mdp-bar {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--mdp-line);
  border-radius: 7px;
  background: var(--mdp-popover);
}

.mdp-bar::after {
  content: '';
  position: absolute;
  top: 13px; /* centred in the 30px bar; the app's 11 in 26 */
  left: 9px;
  width: 42%;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--mdp-fg) 26%, transparent);
}

.mdp-bar--a {
  top: 12px;
  left: 8px;
  width: 120px;
  height: 30px;
}

/* The dragged bar: `border-primary` over a 20% primary fill. Its travel is
   the still's own `b`, emitted inline by the fragment. */
.mdp-bar--b {
  top: 58px;
  left: 140px;
  width: 86px;
  height: 32px;
  border-color: var(--mdp-accent);
  background: color-mix(in oklab, var(--mdp-accent) 20%, transparent);
}

.mdp-bar--b::after {
  top: 14px;
  background: color-mix(in oklab, var(--mdp-accent) 55%, transparent);
}

.mdp-bar--c {
  top: 106px;
  left: 244px;
  width: 46px;
  height: 30px;
}

/* `MousePointer2`: a filled glyph with a knockout halo in the popover's own
   colour. The 1.5 is the app's, in the glyph's own 24 units — this is a halo
   on a fill, not a line glyph, so it does not take `non-scaling-stroke`. */
.mdp-mockup .mdp-cursor {
  position: absolute;
  z-index: 3;
  top: 66px; /* B.top + 8 */
  left: 172px; /* B.left + 32 */
  display: block;
  width: 17px;
  height: 17px;
  fill: var(--mdp-fg);
  stroke: var(--mdp-popover);
  stroke-width: 1.5;
}

/* =========================================================================
   `ShiftModeCards`: `space-y-1.5` of `w-full rounded-lg border px-3 py-2
   text-left text-sm`. The selected one is `border-primary text-primary
   outline-1 outline-primary` — the layout selector's convention — and both
   halves are drawn: a primary border AND a 1px primary outline outside it.
   ========================================================================= */

.mdp-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdp-opt {
  padding: 8px 12px;
  border: 1px solid var(--mdp-line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
  color: var(--mdp-text);
}

.mdp-opt[data-selected] {
  border-color: var(--mdp-accent);
  outline: 1px solid var(--mdp-accent);
  color: var(--mdp-accent);
}

/* =========================================================================
   Dark

   The app's dark `--popover` is oklch(0.26 0 0) = #242424, this site's
   card-02; its `--hover-opaque` is oklch(0.30), card-04 — the same two
   mappings `bid-context.css` makes for the price popover. The gold is the
   app's own dark hex. `--popover-shadow`'s dark half deepens the pools and
   flips the ring to white at 9.4%, a black ring reading as nothing on a dark
   surface.
   ========================================================================= */

:root[data-theme='dark'] .mdp-mockup {
  --mdp-popover: var(--color-theme-card-02-hex);
  --mdp-hover-opaque: var(--color-theme-card-04-hex);
  --mdp-gold: #b39041;
}

:root[data-theme='dark'] .mdp-pop {
  box-shadow:
    rgba(0, 0, 0, 0.2) 0 14px 28px -6px,
    rgba(0, 0, 0, 0.12) 0 2px 4px -1px,
    rgba(255, 255, 255, 0.094) 0 0 0 1px;
}
/*
 * /manage — "Plug into your tools.", card 2: the project's Files tab, filling.
 * Hand-maintained; pairs with tools/fragments/manage-files.mjs, installed by
 * tools/fragments/manage-sync.mjs. Imported by /manage and by the temporary
 * card gallery, which harvests this card onto every page of the site.
 *
 * WHAT THIS IS: the embedded views app's page tab strip with `Files` active,
 * over the gallery that tab really is — `gallery/card.tsx` at `card_preview:
 * "content"`, closing on the grid's own `New File` cell.
 *
 * TYPE AND SPACING ARE THIS ROW'S, NOT THE APP'S, AND THAT IS DELIBERATE.
 * The two drawings either side are the capture's own, at the capture's product
 * ladder — 12px for a title, 11px for a sub-line — so this one is too and
 * there is NO `transform: scale()` here. The app sets a gallery title and a tab
 * label at `text-sm` (14); drawn at 14 beside its neighbours this would be the
 * one graphic on the row carrying a size of its own. Every other length is the
 * app's: the card's 10px corner, its `px-2.5 pt-2.5 pb-2`, the tab's pill and
 * its `px-3`, the `New` cell's border.
 *
 * THE SCORE IS AT THE FOOT OF THE FILE. It fills one card at a time and clears
 * all three at once, which is why each card carries its OWN keyframes rather
 * than one shared keyframe on a staggered delay — a delay shifts both ends of a
 * timeline, so a staggered fill would be a staggered clear. Every state is
 * still ADDED, so THE REST STATE IS THE FILLED GALLERY: what `prefers-reduced-
 * motion` shows through one `animation: none` block, and what the 100% keyframe
 * holds so `pnpm run verify`'s collapsed frame is the still.
 *
 * TRAPS: no `id`, no `<defs>`, no `url(#…)` — the card gallery rewrites every
 * `id=` without rewriting what points at it. Every box in the markup is a
 * `<span>`, so `empty-mockups.js` (which queries `div`) never looks at it.
 *
 * COST: 0 px of page height at 1440/1280/1140/1024/768/390 — the plate is the
 * capture's own fixed aspect box, measured as an A/B INSIDE one render (hide
 * every `.mf`, re-read `scrollHeight`). /manage's own total is not stable build
 * to build, the card gallery below the footer carrying dozens of images.
 */

/* The one thing the score animates, read by the page, the name and the
   skeleton alike — so a card's picture and its name cannot disagree, which two
   separate animations could. It has to be registered to interpolate at all.
   Its initial value is the FILLED state, which is what makes `animation: none`
   the finished still. */
@property --mf-on {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.mf {
  /* The plate this drawing lies on, and what every opaque ink is mixed
     against: the site's own tokens are alpha, and a stroked lucide glyph is
     several paths, so a crossing composites a step darker than the lines
     running into it. Same call bid-activities.css and bid-surfaces.css make. */
  --mf-ground: var(--color-theme-card-02-hex);
  /* The card fill — the same token the two rows on card 1 and card 3 take. */
  --mf-surface: var(--color-theme-card-hex);
  --mf-line: var(--color-theme-border-02);
  --mf-text: var(--color-theme-text);
  --mf-text-sec: color-mix(in srgb, var(--color-theme-fg) 60%, var(--mf-ground));
  /* `data-[state=active]:bg-foreground/10`, the app's own active tab fill. */
  --mf-active: color-mix(in srgb, var(--color-theme-fg) 10%, transparent);
  /* A skeleton is `bg-muted`'s pulse: a wash of the foreground, so it needs no
     dark restatement. Two stops, for the pulse. */
  --mf-skel: color-mix(in srgb, var(--color-theme-fg) 12%, transparent);
  --mf-skel-dim: color-mix(in srgb, var(--color-theme-fg) 6%, transparent);

  /* 12px on the capture's own `--leading-product-base` (1.33333) = a 16px line
     box. Stated rather than read, because the skeleton bars have to occupy
     exactly the lines they stand in for. */
  --mf-lh: 16px;
  /* A skeleton bar, centred in that line box. */
  --mf-bar-h: 7px;

  /* The cycle. See the score. */
  --mf-cycle: 9s;

  display: block;
  position: relative;
  box-sizing: border-box;
  /* FLUID AND UNCAPPED, which is the two figures beside it. Measured on the
     built page at 1440, card 1's flow list and card 3's agent config both draw
     351.67 in a 391.67 box — the plate's own 20px padding is the side air, and
     all three drawings on this row share it. This shipped at a 300px cap for
     one build and read as the one drawing on the row that had been inset.

     THE CAP IS THE 1440 BOX'S OWN WIDTH, so it never binds where the row is
     three columns and always binds below xl, where the grid goes to one and
     the box jumps to 909. Uncapped there the cards draw 450 wide, which is the
     app's `large` card and a different picture; card 3 beside it caps at the
     agent config's own 380 for the same reason. */
  width: 100%;
  max-width: 352px;
  margin-inline: auto;
  color: var(--mf-text);
  font-family: var(--font-system);
  font-size: 0.75rem; /* --text-product-base */
  line-height: var(--mf-lh);
}

.mf * {
  box-sizing: border-box;
}

/* Every box here is a `<span>`, so the inline default is undone once.
   `:where()` contributes no specificity, so this cannot outrank the
   single-class layout rules under it. */
.mf :where(span) {
  display: block;
}

.mf svg {
  display: block;
  flex: 0 0 auto;
  width: 14px; /* size-3.5, the slot the two cards beside this one use */
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* A 1px rule is a smear at any scale but 1; stated so it stays one. */
  vector-effect: non-scaling-stroke;
}

/* ------------------------------------------------------------------ *
 * The tab strip.
 * ------------------------------------------------------------------ */

.mf-tabs {
  display: flex;
  align-items: center;
  gap: 2px; /* gap-0.5 */
  min-width: 0;
  overflow: hidden;
}

/* THE APP'S OWN `px-3`, WHICH THREE TABS CAN AFFORD AND FOUR COULD NOT. At
   four the strip came to ~305px against the 285 the narrowest plate leaves —
   1140, where the three-column grid is tightest — so it ran at `px-2` and the
   tab that would have clipped was the active one. Three tabs at the app's own
   padding come to 217.6 against that same 285. Re-measure at 1140 rather than
   adding a tab or a word to one.

   The height is the 26 hero-mockup.css solves for the same pill: `TabsTrigger`
   asks for `h-9` (36) and the shipped tab measures 30 in a 1:1 screenshot of
   the app, which at this row's type is 26. */
.mf-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px; /* gap-[6px] */
  height: 26px;
  padding: 0 12px; /* px-3 */
  border-radius: 999px;
  color: var(--mf-text-sec);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.mf-tab__l {
  white-space: nowrap;
}

.mf-tab[data-active] {
  background: var(--mf-active);
  color: var(--mf-text);
}

/* ------------------------------------------------------------------ *
 * The gallery.
 * ------------------------------------------------------------------ */

.mf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* `rounded-[10px] shadow-sm border border-border/50 bg-popover`, the app's own
   gallery card. The 10 is the app's `--radius` ladder rather than Tailwind's
   unanchored 8. */
.mf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  background: var(--mf-surface);
}

/* THE PREVIEW BAND IS 2:1 AND THAT IS THE CARD'S ONE GEOMETRY DEPARTURE.
   `CardContentPreview` falls back to `aspect-video` when the caller passes no
   className, and the gallery passes none — but the component takes one exactly
   so a caller can replace the band (the map card does).

   IT IS SOLVED AGAINST THE PLATE, WHICH IS A FIXED SQUARE. The block is
   `tabs + gap + 2 rows + gap`, so the band is whatever is left once the name's
   two lines and the card's own padding are spent; at 2:1 the drawing stands
   311.7 tall in the 391.66 plate a 1440 viewport gives, i.e. 40 of air above
   and below, which is the band the three graphics one section up are measured
   against. It was 3:1 until 2026-09-10 and stood 262.6 on 64.6 — a wide short
   block in the middle of a square plate. RE-SOLVE against the plate, and
   re-check 1140, where the plate is 325 and this is tightest.

   The band's own fill is the skeleton wash: while a card is loading it IS the
   skeleton, and once the (opaque, white) page covers it, its pulse is out of
   sight — which is why there is no second element for it. */
.mf-prev {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: var(--mf-skel);
}

/* ------------------------------------------------------------------ *
 * THE THUMBNAIL.
 *
 * IT IS THE DOCUMENT ITSELF. `card_preview: "content"` renders the file's own
 * generated thumbnail, so what belongs here is the file — not a drawing of
 * one. Each `public/brand/files/*.webp` is a committed crop of the real
 * submittal the owner supplied, cut to a little more than the band shows, so
 * the committed file holds nothing the card does not draw. See the fragment
 * for what is in each and what was filled in.
 *
 * THE PAGE IS DRAWN AT THE BAND'S OWN WIDTH WITH ITS TOP SHOWING, which is
 * what a page thumbnail is: the alternative — the whole letter page fitted
 * into a 2:1 box — is 65px of page in a 169px band with white either side.
 * `height: auto` is what lets three files of three different aspects sit in
 * one band without a single length being restated per file.
 * ------------------------------------------------------------------ */

.mf-pg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ *
 * The card's body.
 * ------------------------------------------------------------------ */

/* `flex flex-col gap-1.5 px-2.5 pt-2.5 pb-2` — CardContent's own box, less the
   gap, this card carrying one cell. */
.mf-body {
  position: relative;
  padding: 10px 10px 8px;
}

/* `GalleryTitleCell`'s title span under `wrap_text: true`, at this row's type
   rather than the app's `text-sm`. Without the wrap it is `truncate`, and a
   137px card would print `Project Schedule Su…` — the card refusing to say
   which file it is. Every name is trimmed to TWO lines at the width that
   binds; a third is 16px a row and 32px off the block's own air. */
.mf-name {
  font-weight: var(--font-weight-medium);
  overflow-wrap: break-word;
  opacity: var(--mf-on);
}

/* The skeleton that stands in for the name. Out of flow, so the card's height
   is the NAME's at every width and a row cannot change height as it fills;
   each bar occupies exactly one line box, so two of them are the two lines
   every name takes. The rest state is the FILLED card, so at `--mf-on: 1` this
   computes to 0 and the score is what brings it back. */
.mf-bars {
  position: absolute;
  inset: 10px 10px 8px;
  opacity: calc(1 - var(--mf-on));
}

.mf-bar {
  height: var(--mf-bar-h);
  margin-block: calc((var(--mf-lh) - var(--mf-bar-h)) / 2);
  border-radius: 3px;
  background: var(--mf-skel);
}

.mf-bar:nth-child(2) {
  width: 64%;
}

/* The grid's own trailing cell: `border border-solid border-border
   text-secondary-opaque rounded-[10px] shadow-sm`, `Plus` and `New {collection}`.
   It never skeletons — it is chrome, not a file. */
.mf-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* gap-1 */
  min-width: 0;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  color: var(--mf-text-sec);
}

/* ------------------------------------------------------------------ *
 * THE SCORE.
 *
 * One 9s loop. The three cards clear TOGETHER, wait a beat as skeletons — a
 * pulsing band where the page is and two bars where the name is — and then
 * fill one at a time, top-left to bottom, before the finished gallery holds
 * for two thirds of the loop, which is what anyone scrolling past at the wrong
 * moment sees.
 *
 * EACH CARD CARRIES ITS OWN KEYFRAMES, and that is the whole reason this is
 * three blocks rather than one on a staggered `animation-delay`: a delay
 * shifts BOTH ends of a timeline, so a staggered fill is a staggered clear,
 * and what the owner asked for is a staggered fill and a simultaneous clear.
 * The out is 6% -> 10% on all three; the ins are 22%, 26% and 30%.
 *
 * IT IS ONE PROPERTY AND NOT TWO ANIMATIONS. `--mf-on` is animated on the card
 * and inherited by the page, the name and the skeleton, so a card's picture
 * and its name can never disagree about which state they are in.
 *
 * THE 100% KEYFRAME IS THE FILLED STATE, not the reset: the loop's own wrap
 * from 100% back to 0% never changes it, and it means the frame
 * `pnpm run verify` collapses to is the still the card rests on.
 * ------------------------------------------------------------------ */

.mf-card {
  animation: mf-card-a var(--mf-cycle) linear infinite;
  /* THE ONE DELAY, AND IT IS THE SAME ON ALL THREE, so the shared clear stays
     shared. It is NEGATIVE and exactly the 10% at which the loop finishes
     clearing, so a fresh paint opens on the empty gallery and fills — where at
     0 it would draw the finished board for half a second and then wipe it,
     which reads as the loop running backwards. Same call
     automate-mockup.css' stagger makes, for the same reason. */
  animation-delay: calc(var(--mf-cycle) * -0.1);
}

.mf-card:nth-child(2) {
  animation-name: mf-card-b;
}

.mf-card:nth-child(3) {
  animation-name: mf-card-c;
}

.mf-pg {
  opacity: var(--mf-on);
}

/* The band's own pulse rides `background-color` while the score owns opacity
   elsewhere; it is undelayed and never stops, because once the page above it
   is opaque there is nothing to see. */
.mf-prev {
  animation: mf-pulse 1.6s ease-in-out infinite;
}

@keyframes mf-card-a {
  0%,
  6% {
    --mf-on: 1;
  }

  10%,
  22% {
    --mf-on: 0;
  }

  26%,
  100% {
    --mf-on: 1;
  }
}

@keyframes mf-card-b {
  0%,
  6% {
    --mf-on: 1;
  }

  10%,
  26% {
    --mf-on: 0;
  }

  30%,
  100% {
    --mf-on: 1;
  }
}

@keyframes mf-card-c {
  0%,
  6% {
    --mf-on: 1;
  }

  10%,
  30% {
    --mf-on: 0;
  }

  34%,
  100% {
    --mf-on: 1;
  }
}

/* `animate-pulse`'s own shape, on colour rather than opacity. */
@keyframes mf-pulse {
  0%,
  100% {
    background-color: var(--mf-skel);
  }

  50% {
    background-color: var(--mf-skel-dim);
  }
}

/* A reader who has asked for less motion gets the gallery as it rests — three
   files, their pages drawn, no bars. One block, no second set of values,
   because nothing above changed a resting property: `--mf-on` is registered
   with an initial value of 1, which IS the filled card. */
@media (prefers-reduced-motion: reduce) {
  .mf-card,
  .mf-prev {
    animation: none;
  }
}
/* GENERATED — do not hand-edit. Regenerate with:
 *     python3 tools/build-surfaces-restate.py
 *
 * Every rule src/styles/product.css has for a class the moved markup uses and
 * src/styles/cloud.css does not already carry, scoped to `#surfaces`. The comparison is
 * per rule, not per class — see tools/lib/restate_css.py.
 *
 * Restated: 40 classes, 42 rules.
 * Inert in every sheet in this repo (so inert on the source page too):
 *   bg-theme-bg-muted, stack, text-theme-text-ter, text-theme-text-ter/40, text-theme-text-ter/60, text-theme-text-ter/70, undefined
 */
#surfaces .btn-tertiary{padding:unset;color:var(--color-theme-accent);background-color:#0000;border:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}
#surfaces .right-4{right:calc(var(--spacing)*4)}
#surfaces .bottom-3{bottom:calc(var(--spacing)*3)}
#surfaces .bottom-8{bottom:calc(var(--spacing)*8)}
#surfaces .left-4{left:calc(var(--spacing)*4)}
#surfaces .mx-3{margin-inline:calc(var(--spacing)*3)}
#surfaces .mt-auto{margin-top:auto}
#surfaces .mb-4{margin-bottom:calc(var(--spacing)*4)}
#surfaces .ml-1{margin-left:calc(var(--spacing)*1)}
#surfaces .ml-2{margin-left:calc(var(--spacing)*2)}
#surfaces .block{display:block}
#surfaces .min-h-2{min-height:calc(var(--spacing)*2)}
#surfaces .min-h-\[36px\]{min-height:36px}
#surfaces .min-h-full{min-height:100%}
#surfaces .min-w-\[2rem\]{min-width:2rem}
#surfaces .cursor-not-allowed{cursor:not-allowed}
#surfaces .overflow-y-hidden{overflow-y:hidden}
#surfaces .rounded-2xs{border-radius:var(--radius-2xs)}
#surfaces .border-theme-text{border-color:var(--color-theme-text)}
#surfaces .bg-theme-button-bg{background-color:var(--color-theme-button-bg)}
#surfaces .bg-theme-card-02-hex\/50{background-color:#ebeae580}
@supports (color:color-mix(in lab,red,red)){#surfaces .bg-theme-card-02-hex\/50{background-color:color-mix(in oklab,var(--color-theme-card-02-hex) 50%,transparent)}}
#surfaces .bg-theme-card-02-hex\/80{background-color:#ebeae5cc}
@supports (color:color-mix(in lab,red,red)){#surfaces .bg-theme-card-02-hex\/80{background-color:color-mix(in oklab,var(--color-theme-card-02-hex) 80%,transparent)}}
#surfaces .px-0\.5{padding-inline:calc(var(--spacing)*.5)}
#surfaces .pt-5{padding-top:calc(var(--spacing)*5)}
#surfaces .pt-v8\/12{padding-top:var(--spacing-v8\/12)}
#surfaces .pr-3{padding-right:calc(var(--spacing)*3)}
#surfaces .pb-20{padding-bottom:calc(var(--spacing)*20)}
#surfaces .pl-1{padding-left:calc(var(--spacing)*1)}
#surfaces .text-right{text-align:right}
#surfaces .type-product-base-mono{font-family:var(--font-berkeley-mono),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:var(--text-product-base);line-height:var(--leading-product-base-mono);font-weight:var(--font-weight-normal)}
#surfaces .font-berkeley-mono{font-family:var(--font-berkeley-mono),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
#surfaces .leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}
#surfaces .tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}
#surfaces .whitespace-pre{white-space:pre}
#surfaces .whitespace-pre-wrap{white-space:pre-wrap}
#surfaces .text-green-600{color:var(--color-green-600)}
#surfaces .text-red-600{color:var(--color-red-600)}
#surfaces .text-theme-button-text{color:var(--color-theme-button-text)}
#surfaces .opacity-90{opacity:.9}
@view-transition{@property --tw-border-style{@property --tw-leading{@property --tw-border-spacing-y{@property --tw-translate-y{@property --tw-scale-x{@property --tw-scale-z{@property --tw-rotate-y{@property --tw-skew-x{@property --tw-pan-x{@property --tw-pinch-zoom{@property --tw-space-y-reverse{@property --tw-divide-y-reverse{@property --tw-gradient-from{@property --tw-gradient-to{@property --tw-gradient-via-stops{@property --tw-gradient-via-position{@property --tw-tracking{@property --tw-slashed-zero{@property --tw-numeric-spacing{@property --tw-shadow{@property --tw-shadow-alpha{@property --tw-inset-shadow-color{@property --tw-ring-color{@property --tw-inset-ring-color{@property --tw-ring-inset{@property --tw-ring-offset-color{@property --tw-outline-style{@property --tw-brightness{@property --tw-grayscale{@property --tw-invert{@property --tw-saturate{@property --tw-drop-shadow{@property --tw-drop-shadow-alpha{@property --tw-backdrop-blur{@property --tw-backdrop-contrast{@property --tw-backdrop-hue-rotate{@property --tw-backdrop-opacity{@property --tw-backdrop-sepia{@property --tw-ease{@font-face{@font-face{@font-face{@font-face{@font-face{#surfaces .sf-hidden{display:none!important}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}