/* Project adapters only. The original microsites remain immutable. */
.research-project-chapters{display:none}
.research-project .research-header,.research-project .research-footer{letter-spacing:normal}
.research-project .research-header-inner{width:100%;padding-inline:var(--pad)}
.research-project .research-navigation{gap:25px;line-height:1.4}
.research-project .research-header .research-navigation a{font-size:14px;font-weight:400}
.research-project .research-brand span{font-weight:550}
.research-project .research-footer{padding-bottom:0}
.research-project .research-footer ul{gap:0}
.research-project .research-footer a{font-size:16px}
.research-project .research-footer .footer-brand p{font-weight:400;line-height:1.3;margin-top:26px}
.research-project .research-footer .footer-bottom{margin-top:55px}
.research-project .skip-link{position:fixed;top:-100px;left:20px;z-index:10001;padding:12px 20px;background:#fcbf00;color:#282829;font-size:16px}
.research-project .skip-link:focus{top:12px}
.research-project .nav,.project-chap nav.gx,.research-project .nav .burger,.research-project .menu,.project-chap .nav-burger,.project-chap #nav-menu{display:none!important}
.research-project main section[id],.project-chap section{scroll-margin-top:110px!important}
.research-project .nav .row{height:58px;min-height:58px}
.research-project .nav .chapters{display:flex;gap:12px}
.research-project .nav .chapters a{padding-block:8px;font-size:12px}
.research-project .nav .chapters b{font-size:10px}
.research-project .nav .pill{padding:8px 16px;font-size:11px}
.project-colophon{background:#303031;color:#c9c9c5;border-top:1px solid #ffffff24;padding-block:30px}
.project-colophon>.frame{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}
.project-colophon h3{font-size:14px!important;letter-spacing:.1em!important;text-transform:uppercase;font-weight:700!important;color:#fff!important;line-height:1.4;margin-bottom:10px}
.project-colophon p{font-size:16px;line-height:1.6;margin:0!important}
.project-colophon summary{font-size:16px;color:#ffd080;cursor:pointer}
.project-colophon pre{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.project-chap nav.gx{height:58px!important;padding-inline:var(--pad)!important;gap:20px!important}
.project-chap nav.gx .nav-lockup{font-size:10px!important;white-space:nowrap}
.project-chap nav.gx .nav-links a{padding:7px 9px!important}
.project-chap nav.gx .nav-links a .nav-label{font-weight:500!important;font-size:11px!important}
.project-chap nav.gx .nav-btn{padding:9px 15px!important;font-size:10px!important}
.project-chap #scroll-progress{display:none}
.project-chap .research-header .research-navigation{display:flex;overflow:visible}
.project-chap .research-header .research-navigation a{color:#d5d5d3;padding:31px 0}
.project-chap main{--bb-font-sans:'Zalando Sans',system-ui,sans-serif;--bb-font-mono:ui-monospace,SFMono-Regular,Consolas,monospace}
.project-chap .research-header span{color:inherit}
.project-chap .research-header svg{display:block}
.project-chap .research-footer h3{font-family:var(--sans);font-weight:600;line-height:1.3}
.project-chap .research-footer p{font-family:var(--sans);font-weight:400}
.project-chap .research-footer ul{display:block}
.project-chap .research-footer li{list-style:none}
.project-chap .research-footer .footer-bottom{border-top:1px solid #ffffff22}
/* Match the compact section label and heading rhythm used by Metis/Brevet. */
.project-chap .sec-head{display:grid!important;grid-template-columns:max-content minmax(0,1fr);align-items:baseline!important;gap:0 8px!important;margin-bottom:28px!important}
.project-chap .sec-head>div:not(.sec-num){display:contents}
.project-chap .sec-head .sec-num,.project-chap main p:has(+.sec-h1){font:600 13px/1.2 var(--sans)!important;letter-spacing:.08em!important;text-transform:uppercase;margin:0 0 18px!important;color:var(--chap-ink)!important;padding:0!important}
.project-chap .sec-head .sec-num::after{content:" /";white-space:pre}
.project-chap .sec-head:not(:has(.sec-num))>div>p{grid-column:1/-1}
.project-chap .sec-h1{grid-column:1/-1;font:450 clamp(39px,4.5vw,66px)/1.08 var(--sans)!important;letter-spacing:-.04em!important;text-transform:none!important;max-width:25ch!important;text-wrap:pretty}
.project-chap .sec-h1+div:empty{display:none}
.project-chap main section>.gx.wrap{max-width:1200px!important;padding:clamp(72px,8vw,116px) var(--pad)!important}
.project-chap .watch-wrap{max-width:1200px!important;padding-inline:var(--pad)!important}
.project-chap main p a{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:4px}
.project-metis{--nav-accent:#f57000;--ember:#a94300;--amber:#ffaa66;--project-signal:#f57000;--line:#deded9}
.project-metis main{--ember:#a94300;--amber:#ffaa66}
.project-metis .hero .link,.project-metis .hero .eye,.project-metis .hero h1 .dot,.project-metis .dark .link{color:#ffaa66!important}
.project-metis .m37-gap-explanation>.lede{color:#e2e2e6!important}
.project-metis #gap{border-top-color:#f57000}
.project-metis .research-navigation a[aria-current=page]:after{background:#f57000}
.project-metis .research-project-chapters p,.project-metis .project-colophon summary{color:#ffaa66}
.project-chap{--nav-accent:#ff9900;--ember:#ff9900;--amber:#ff9900;--project-signal:#ff9900;--chap-ink:#282829}
.project-chap main{--ember:#ff9900;--amber:#ff9900;--bb-ember:#ff9900;--bb-amber:#ff9900}
.project-chap #top,.project-chap #why,.project-chap #scale,.project-chap #trail{--chap-ink:#ff9900}
.project-chap #trace-rows{--chap-ink:#282829}
.project-chap main :focus-visible{outline-color:var(--chap-ink,#282829)}
.project-chap .registration-submit{color:#282829}
.project-chap ::selection{background:#ff9900;color:#282829}
.project-brevet{--nav-accent:#fcbf00}
.project-chap .research-navigation a[aria-current=page]:after{background:#ff9900}
.project-chap .research-project-chapters p,.project-chap .project-colophon summary{color:#ff9900}
.project-chap nav.gx #nav-links a span:first-child{color:#ff9900!important}

.project-chap [data-edit="run-4"]>code{color:#282829!important}
@media(max-width:1239px){
 .research-project .nav,.project-chap nav.gx{display:none!important}
 .research-project .research-navigation,.project-chap .research-header .research-navigation{display:none}
 .research-project .research-navigation.is-open,.project-chap .research-header .research-navigation.is-open{display:grid}
 .research-project .research-header .research-navigation,.project-chap .research-header .research-navigation{overflow-y:auto;max-height:calc(100dvh - 76px);overscroll-behavior:contain}
 .research-project .research-header .research-navigation>a{font-size:21px;padding:18px 0}
 .research-project-chapters{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;grid-column:1/-1;border-top:1px solid #ffffff30;margin-top:25px;padding-top:20px}
 .research-project-chapters p{grid-column:1/-1;color:#ffca84;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}
 .research-project .research-header .research-project-chapters a{font-size:15px;padding:13px 0}
 .research-project section[id]{scroll-margin-top:90px}
 .project-chap section{scroll-margin-top:95px!important}
}
@media(max-width:800px){.project-colophon>.frame{grid-template-columns:1fr;gap:23px}.research-project .research-footer .footer-brand p{margin-top:0}}
@media(max-width:540px){
 .research-project .research-header .research-navigation,.project-chap .research-header .research-navigation{max-height:calc(100dvh - 72px)}
 .research-project .research-header .research-navigation>a{font-size:20px;padding:13px 0}
 .research-project .research-header .research-project-chapters a{font-size:14px;padding:11px 0}
 .research-project .research-footer .footer-brand p{margin-top:20px}
}
/* Reading remains possible without scripting; inactive demos are replaced. */
html:not(.js) .project-metis #worked-story,html:not(.js) .project-brevet #worked-story{display:none!important}
.static-example{padding:30px;border:1px solid #d4d4cf;border-radius:8px;background:#fff;color:#282829;margin-block:25px}
.static-example .static-note{font-size:15px;color:#60605a;margin:0 0 24px}.static-example h3{font-size:30px}.static-example ol{padding-left:22px;margin-top:22px;display:grid;gap:22px}.static-example h4{font-size:19px;margin:0 0 8px}.static-example li p{font-size:16px;line-height:1.6;margin:0}
html:not(.js) .project-chap .faq-ans{display:block!important;max-height:none!important}
@media(max-width:1239px){html:not(.js) .research-project .research-header .research-header-inner{height:auto;min-height:76px;flex-wrap:wrap;padding-top:15px}html:not(.js) .research-project .research-header .research-navigation{display:grid!important;grid-template-columns:1fr 1fr;position:static;max-height:none;overflow:visible!important;padding:15px 0 25px;width:100%;margin:0;gap:0 20px}html:not(.js) .research-project .research-header .research-menu-toggle{display:none}html:not(.js) .research-project .research-header{position:relative}}
/* CHAP keeps Brightbeam's ember-to-amber gradient where its original design used it. Amber stays the project accent. */
.project-chap{--bb-grad-ember:linear-gradient(180deg,#EA4700 0%,#FF9900 100%);--bb-grad-ember-h:linear-gradient(90deg,#EA4700 0%,#FF9900 100%);--bb-grad-ember-d:linear-gradient(135deg,#EA4700 0%,#FF9900 100%)}
/* Rich black holds at least 5:1 at every point on the gradient; white falls to 2.1:1 at the amber end. */
.project-chap [style*="--bb-grad-ember-d"],.project-chap [style*="--bb-grad-ember-d"] :is(p,h2,h3,div,small){color:#0a0a0a!important}
.project-chap [style*="--bb-grad-ember-d"] a{background:#282829!important;color:#fff!important}
.project-chap [style*="--bb-grad-ember-d"] a[style*="background:transparent"]{background:transparent!important;color:#0a0a0a!important;box-shadow:inset 0 0 0 1.5px #0a0a0a!important}
.project-chap [style*="--bb-grad-ember-d"] a:focus-visible{outline-color:#0a0a0a!important}
/* Metis's photograph settles from a slight zoom on load. Where it sits above the text, the zoom ran a few pixels
   past the shade and showed a bright strip, so the shade carries a band of its own colour below it. */
@media(max-width:1040px){.project-metis #top .shade{box-shadow:0 10px 0 #282829}}
/* The hero's second link is white on every project page, as on CHAP and Brevet. The Metis palette above sets
   its links with !important, so this needs it too. */
.project-metis #top .btns .link+.link{color:#fff!important}
/* Two Metis controls suppressed their focus indicator. */
.project-metis .m37-loop .node:focus-visible .c{stroke:#a94300!important;stroke-width:4px!important}
.project-metis .m38-views>[role=tabpanel]:focus-visible{outline:2px solid #a94300!important;outline-offset:6px!important}
/* CHAP's hero and section shell in the layout Metis and Brevet share. Values follow their stylesheet. */
.project-chap #top{position:relative;display:flex;align-items:flex-end;min-height:min(82vh,860px);padding:clamp(120px,18vh,220px) 0 clamp(64px,8vh,96px);overflow:hidden;background:#282829;color:#fff}
.project-chap #top .photo-frame{position:absolute;inset:0 0 0 auto;width:58%;overflow:hidden}
/* The photograph keeps its full height in a panel on the right, so the robot and the record stay in view and clear of the text. */
.project-chap #top .photo{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.project-chap #top .shade{position:absolute;inset:0;background:linear-gradient(90deg,#282829 0%,#282829 41%,rgba(40,40,41,.78) 48%,rgba(40,40,41,.2) 60%,rgba(40,40,41,0) 74%),linear-gradient(180deg,rgba(40,40,41,.25),rgba(40,40,41,0) 28%,rgba(40,40,41,0) 80%,rgba(40,40,41,.35))}
.project-chap #top .hero-wrap{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.project-chap #top .herotext{max-width:min(660px,46vw)}
.project-chap #top .eye{font:500 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#ff9900;margin:0 0 16px}
.project-chap #top .hero-h1{font:500 clamp(40px,5vw,84px)/1.02 var(--sans);letter-spacing:-.02em;color:#fff;margin:0;white-space:normal;text-wrap:balance}
.project-chap #top .hero-h1 .dot{color:#ff9900}
/* The full stop is drawn as text so it stays with the last word when the line wraps. */
.project-chap #top .hero-h1 .stop{color:#ff9900}.project-chap #top .hero-h1 .stop::before{content:"."}
.project-chap #top .lede{font:400 18px/1.5 var(--sans);color:rgba(255,255,255,.82);max-width:29em;margin:24px 0 0}
.project-chap #top .btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:36px}
.project-chap #top .link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:400 18px/1.6 var(--sans);color:#ff9900;white-space:nowrap;text-decoration:none}
.project-chap #top .link+.link{color:#fff}
.project-chap #top .link svg{width:24px;height:24px;flex:none}
@media(prefers-reduced-motion:no-preference){.project-chap #top .herotext{animation:rise .85s cubic-bezier(.22,.61,.36,1) both}}
/* On desktop each project headline keeps to its two lines. CHAP's longer second line
   needs the photograph shifted so the robot stays clear of it. */
@media(min-width:1041px){.project-chap #top .hero-h1{white-space:nowrap;text-wrap:nowrap;width:max-content}.project-chap #top .photo{object-position:30% 50%}.project-brevet #top h1{white-space:nowrap;text-wrap:nowrap;width:max-content;max-width:none}.project-brevet #top h1 .dot{display:block}}
@media(max-width:1040px){.project-chap #top{display:block;min-height:0;padding:0 0 56px}.project-chap #top .photo-frame{position:relative;width:100%;height:clamp(240px,58vw,460px)}.project-chap #top .photo{object-position:50% 60%}.project-chap #top .shade{inset:0 0 auto;height:clamp(240px,58vw,460px);background:linear-gradient(180deg,rgba(40,40,41,.12),rgba(40,40,41,0) 35%,rgba(40,40,41,.3) 72%,#282829)}.project-chap #top .hero-wrap{margin-top:-12px}.project-chap #top .herotext{max-width:none}}
@media(max-width:600px){.project-chap #top .hero-h1{font-size:clamp(38px,8.9vw,54px)}.project-chap #top .lede{font-size:19px}.project-chap #top .eye{font-size:12px}.project-chap #top .link{white-space:normal}}
/* The two paragraphs that open 'What it is', with the paragraph they now lead into. */
.project-chap #what .chap-opening,.project-chap #what [data-edit="what-maya"]{font:400 19px/1.6 var(--sans)!important;color:#3c3c3d!important;max-width:760px;margin:0 0 20px!important}
.project-chap #what .chap-opening strong{font-weight:600;color:#282829}
.project-chap #what [data-edit="hero-4b"]{font-weight:500!important;color:#282829!important}
.project-chap #what [data-edit="what-maya"]{margin-bottom:30px!important}
/* CHAP's six sections follow Metis and Brevet. Numbered heads lead a section; the heads inside it are smaller. */
.project-chap .sec-head:not(:has(.sec-num)) .sec-h1,.project-chap main .gx>.sec-h1{font:450 clamp(30px,3.1vw,44px)/1.12 var(--sans)!important;letter-spacing:-.03em!important}
.project-chap main section>.gx.wrap>p[style*="font:300 22px"]{font:400 19px/1.6 var(--sans)!important;max-width:760px!important}
/* The film stays under the hero, set in the same type as the sections below it. */
.project-chap .watch-section{background:#fff;border-top:0}
.project-chap .watch-wrap{padding-block:clamp(56px,6vw,88px)!important}
.project-chap .watch-intro{display:block;margin-bottom:30px}
.project-chap .watch-kicker,.project-chap .chap-kicker{font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#282829;margin:0 0 18px}
.project-chap .watch-intro h2{font:450 clamp(30px,3.1vw,44px)/1.12 var(--sans);letter-spacing:-.03em;color:#282829}
.project-chap .watch-lead{font:400 19px/1.6 var(--sans);color:#3c3c3d;max-width:760px;margin-top:16px;text-wrap:balance}
.project-chap #faq{background:#fff!important}
/* CHAP · What it is: the statement the section turns on, set large with the CHAP accent. */
.project-chap #what p[data-edit="hero-4b"]{font:600 clamp(24px,2.5vw,32px)/1.25 var(--sans)!important;letter-spacing:-.015em;color:#282829!important;margin:8px 0 28px!important;padding-left:18px;border-left:4px solid #ff9900;max-width:760px}

/* CHAP · Build it in the open: space between the heading and the licence line. */
.project-chap #build p[data-edit="build-3"]{margin-top:22px!important}

/* CHAP · Why: the eight questions read as two columns on wide screens. */
@media(min-width:900px){.project-chap #why #qualify-items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}}

/* Package registries beside the quick start. */
.bv-quickstart-copy>p.bv-registries{font-size:16px;line-height:1.5;color:#65656d;margin:-6px 0 18px}
.bv-registries a{color:inherit;text-decoration:underline;text-decoration-color:#b9b9b2;text-underline-offset:4px}
.bv-registries a:hover{color:var(--char,#282829);text-decoration-color:currentColor}