/* Critter adapters: notebook semantic tokens are the source of all brand colors. */
body{background:var(--canvas);color:var(--text);font-family:Archivo,Arial,sans-serif}
.critter-lockup{display:inline-flex;width:145px;height:48px;align-items:center}
.critter-lockup img{width:100%;height:100%;object-fit:contain}
.critter-logo-dark{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .critter-logo-light{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .critter-logo-dark{display:block}
.critter-theme-control{display:flex;align-items:center;gap:10px;font:12px/18px 'Space Mono',monospace;color:var(--text-muted)}
.critter-theme-control select{font:600 14px/20px Archivo,Arial,sans-serif;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;padding:9px 30px 9px 12px;min-height:40px;cursor:pointer}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.brand-eyebrow{font:12px/18px 'Space Mono',monospace;color:var(--link);margin:0 0 20px}
.landing-page .product-value{max-width:820px;margin-bottom:44px}
.landing-page #overview .product-value h1{font:600 clamp(40px,5vw,64px)/1.0625 Archivo,Arial,sans-serif;letter-spacing:-.035em;max-width:15ch;margin-bottom:24px}
.landing-page .value-lede{font-size:20px;line-height:32px;max-width:590px}
.landing-page h2,.landing-page #pro h2{font-weight:600;line-height:1.22;font-size:clamp(28px,3.3vw,36px)}
.landing-page .product-cta,.product-cta,.example-button{background:var(--accent);color:var(--on-accent);border-radius:8px;font-weight:600;transition:background 120ms ease,transform 120ms ease}
.landing-page .product-cta:hover,.product-cta:hover{background:var(--accent-hover);color:var(--on-accent)}
.landing-page .product-cta:active,.product-cta:active{background:var(--accent-pressed);transform:scale(.98)}
.landing-page .hero-presentation,.workflow-screen{background:var(--brand-surface);border:1px solid var(--border);border-radius:12px}
.landing-page .hero-presentation:before{background:none}
.hero-frame,.hero-frame .workflow-hero{background:transparent}
.landing-page .pro-benefits li,.landing-page .pro-status{border-radius:10px}
/* The selected theme reaches the real extension chrome in every demo chapter. */
.product-page .hero-demo,.hero-demo{--demo-bg:var(--canvas);--demo-raised:var(--surface-raised);--demo-chrome:var(--surface-subtle);--demo-ink:var(--text);--demo-muted:var(--text-muted);--demo-line:var(--border);--demo-accent:var(--link);--demo-button:var(--accent);--demo-button-ink:var(--on-accent);--demo-selected:var(--selected)}
.product-page .demo-sidebar,.product-page .extension-card,.product-page .pairing-pane .mock-field{background:var(--surface-raised);color:var(--text)}
.product-page .demo-composer,.product-page .chat-user,.product-page .change-result{background:var(--surface);border-color:var(--border);color:var(--text)}
.product-page .change-result>span,.product-page .agent-label{color:var(--link)}
.hero-frame .install-logo-tile{background:var(--accent)}
.hero-frame .install-logo-tile .install-mark{width:36px;height:36px}
.product-page .target-label{background:var(--chip);color:var(--chip-text)}
.product-page .demo-tabbar,.product-page .demo-chrome{background:var(--surface-subtle);color:var(--text);border-color:var(--border)}
.product-page .demo-tab,.product-page .demo-address,.hero-frame .existing-extension{background:var(--surface-raised);color:var(--text);border-color:var(--border)}
.product-page .demo-pr,.product-page .folder-picker{background:var(--canvas);color:var(--text)}
.product-page .demo-browser{border-color:var(--border-strong)}
/* The customer's example checkout retains its own visual identity. */
.product-page .demo-app{--demo-ink:#182327;--demo-muted:#5c6668;--demo-line:#dcdedb;color:#182327;color-scheme:light}
.terminal-prompt{color:var(--cornflower-300)}
.hero-frame .connect-terminal{background:var(--ink-950);color:var(--ink-50)}
.hero-frame .connect-terminal-title{background:var(--ink-850);color:var(--ink-50)}
.hero-frame .connect-terminal-result,.hero-frame .connect-launch-result{color:var(--cornflower-200)}
/* Compact public brand reference and email preview. */
.brand-reference{max-width:1120px;margin:auto;padding:24px}
.brand-reference main{margin:0;padding:0;max-width:none}
.brand-reference header{align-items:center}
.brand-reference h1{font:600 clamp(40px,6vw,64px)/1.0625 Archivo,Arial,sans-serif;letter-spacing:-.035em}
.brand-reference h2{font-size:32px;font-weight:600}
.brand-reference .brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.brand-reference article{padding:24px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.brand-reference .brand-example{padding:32px;background:var(--brand-surface);border-radius:10px;margin:24px 0}
.brand-reference .brand-example .critter-lockup{width:240px;height:80px}
@media(max-width:480px){.critter-theme-control label{display:none}.critter-lockup{width:121px;height:40px}.landing-page .value-lede{font-size:18px;line-height:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.access-page header{flex-wrap:wrap}
.access-page header>a:nth-child(2){font-size:13px}
.access-page .critter-theme-control label{margin:0}
.access-page .card{background:var(--surface);color:var(--text);border-color:var(--border);border-radius:10px}
.access-page input,.access-page textarea{background:var(--canvas);color:var(--text);border-color:var(--border-strong)}
.access-page button,.access-page .button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.access-page button.secondary{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong)}
.access-page #error,.access-page [role="alert"]{color:var(--error)}
.access-page :is(button,a,input,textarea,summary):focus-visible{outline-color:var(--focus)}
.access-page .brand .critter-lockup img{width:100%}
@media(max-width:520px){.access-page header>a:nth-child(2){order:3;width:100%}.access-page .critter-theme-control{margin-left:auto}}
.page>header{flex-wrap:wrap;gap:16px;padding-block:16px}
.page>header>.critter-theme-control{margin-left:auto}
.page .demo-desktop{background:var(--brand-surface);border-color:var(--border)}
.page .demo-desktop:before,.page .demo-desktop:after{background:none}
@media(max-width:600px){.page>header .header-actions{order:3;width:100%}.page>header .header-download{width:100%;justify-content:center}}