/* One canvas and one document across the landing and account-access previews. */
:root{--atlas-shift:0vw;--atlas-lift:0vh}
/* Sharp controls are shared by the landing, account views and interactive demo. */
:root button,:root .button{border-radius:0}
.atlas-canvas{transform:translate3d(var(--atlas-shift),var(--atlas-lift),0);transition:transform 1400ms cubic-bezier(.65,0,.25,1)}
.atlas-fallback{transform:translate(calc(-50% + var(--atlas-shift)),var(--atlas-lift));transition:transform 1400ms cubic-bezier(.65,0,.25,1)}
html[data-atlas-position=aside]{--atlas-shift:24vw}
html:not([data-route=home]) #landing-view,html:not([data-route=home]) .landing-nav,html:not([data-route=home]) .apps-link,html:not([data-route=home]) .account-link,html:not([data-route=home]) .menu-toggle,html:not([data-route=home]) #mobile-nav{display:none!important}
.auth-home-link{display:none;white-space:nowrap;font-size:12px}
html:not([data-route=home]) .auth-home-link{display:block}
.auth-page{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;padding:160px clamp(28px,9.2vw,150px) 130px;pointer-events:none}
.atlas-scene::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1400ms cubic-bezier(.65,0,.25,1);background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 97%,transparent),color-mix(in srgb,var(--paper) 75%,transparent) 31%,transparent 67%)}
html[data-atlas-position=aside] .atlas-scene::before{opacity:1}
.auth-panel{width:390px;max-width:100%;pointer-events:auto}
.auth-panel>.eyebrow{font-size:9px;color:var(--muted);margin-bottom:24px}
.auth-panel h1{font:500 clamp(44px,4.5vw,64px)/1.07 Public,Arial,sans-serif;letter-spacing:-.05em;text-shadow:none}
.auth-description{font-size:15px;line-height:1.8;color:var(--muted);margin:22px 0 30px}
.auth-options{display:grid;gap:12px}.auth-panel .button{font-family:'Open Sans',Arial,sans-serif;min-height:49px;padding:13px 18px;width:100%}
.auth-secondary{border-color:var(--line);background:color-mix(in srgb,var(--paper) 55%,transparent)}
.auth-preview{font-size:11px;line-height:1.8;color:var(--muted);margin-top:22px;max-width:340px}
.auth-legal{position:absolute;bottom:28px;left:clamp(28px,9.2vw,150px);right:28px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;font:10px 'Open Sans',Arial,sans-serif;color:var(--muted);pointer-events:auto}
.auth-legal span{font-size:9px;opacity:.8}
.auth-step-back{display:inline-block;margin-bottom:32px;font:11px 'Open Sans',Arial,sans-serif;color:var(--muted)}
.auth-alternative{display:inline-block;font:12px 'Open Sans',Arial,sans-serif;margin-top:25px}
.auth-preview-form fieldset{border:0;padding:0;margin:0;min-width:0}.auth-preview-form label{display:block;font:12px 'Open Sans',Arial,sans-serif;margin-bottom:9px}.auth-preview-form input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:var(--subtle);font:13px 'Open Sans',Arial,sans-serif;color:var(--muted);opacity:1}.auth-preview-form button{margin-top:14px;opacity:.55;cursor:not-allowed}.auth-preview-form .button:hover{transform:none;box-shadow:none}
.no-script-note{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--paper);border-top:1px solid var(--line);padding:15px;font:12px Public,Arial,sans-serif}
.route-changing{scroll-behavior:auto}.route-changing [data-view],.route-changing [data-view] *, .route-changing #route-outlet,.route-changing #route-outlet *{pointer-events:none!important}
@media(max-width:700px){html[data-atlas-position=aside]{--atlas-shift:19vw;--atlas-lift:-14vh}.auth-page{align-items:flex-start;padding:clamp(180px,34svh,300px) 26px 115px}.atlas-scene::before{background:linear-gradient(0deg,color-mix(in srgb,var(--paper) 96%,transparent),color-mix(in srgb,var(--paper) 78%,transparent) 43%,transparent 80%)}.auth-panel{width:390px}.auth-panel h1{font-size:48px}.auth-description{font-size:13px}.auth-legal{left:26px;font-size:9px;gap:17px}.auth-legal span{width:100%;font-size:8px}.header-actions .apps-link{display:none}.header-actions .account-link{display:block;font-size:10px;white-space:nowrap}.account-link span{display:none}.auth-home-link{font-size:10px}}
@media(max-width:360px){.topbar .wordmark{font-size:16px}.header-actions{gap:6px}.header-actions .account-link{font-size:9px}.auth-page{padding-left:22px;padding-right:22px}.auth-panel h1{font-size:42px}.auth-description{font-size:12px}}

/* Marketing headings stand alone, without numbered or all-caps eyebrow labels. */
.section-heading h2,.feature-intro h2,.computer-copy h2,.services-heading h2,.join-card h3,.consulting-heading h3,.feature-notes h3{margin-top:0}
.computer-roadmap h3{font-size:18px;font-weight:550;letter-spacing:-.025em}
.plan-selection-label{font:inherit;letter-spacing:0;color:var(--ink)}
.plan-selection-label h3{font-size:20px;font-weight:550}
.demo-heading h3:first-child{margin-top:0}

/* Local glass protects the hero copy without dimming the cloud around it. */
.hero-glass{background:color-mix(in srgb,var(--paper) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 28px #0000000c}
.hero-kicker{font:600 10px/1.5 'Open Sans',Arial,sans-serif;letter-spacing:.14em;padding:7px 12px;margin-bottom:14px}
.hero-lede.hero-glass{position:relative;isolation:isolate;padding:4px 6px;line-height:1.3;text-shadow:none;max-width:100%;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:600px){.hero-kicker{font-size:8px;padding:6px 10px}.hero-lede.hero-glass{padding:4px 6px}}


.hero-lede .serif{position:relative;display:inline-block;padding-bottom:.2em}
.hero-lede .serif::after{content:'';position:absolute;left:-.025em;right:-.025em;bottom:-.035em;height:.28em;background:url('/assets/spectrum-brush.svg') center/100% 100% no-repeat;pointer-events:none}


/* Panes sit above the atlas, below content, never inside fading text ancestors. */
.text-backdrops{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.text-backdrop-pane{position:absolute;left:0;top:0;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--paper) 25%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent),linear-gradient(0deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent),linear-gradient(0deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-composite:source-in}
.section[tabindex="-1"]:focus{outline:none}

/* The appearance control shows the current theme and blends into the topbar. */
.topbar .theme-toggle{background:transparent;box-shadow:none}
.theme-toggle .theme-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-icon-moon{display:none}
.dark-style .theme-toggle .theme-icon-sun{display:none}
.dark-style .theme-toggle .theme-icon-moon{display:block}
.theme-toggle:hover .theme-icon{opacity:.7}
/* Plan actions are text links with the same painted spectrum as the hero. */
.brush-link{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;align-self:flex-start;justify-self:start;min-height:44px;padding:8px 0 14px;border:0;background:none;box-shadow:none;color:var(--ink);font:600 12px/1.6 'Open Sans',Arial,sans-serif;white-space:nowrap;pointer-events:auto}
.brush-link>span{font-size:19px;font-weight:400;line-height:1;transition:transform 180ms ease}
.brush-link::after{content:'';position:absolute;left:-1px;right:-1px;bottom:3px;height:7px;background:url('/assets/spectrum-brush.svg') center/100% 100% no-repeat;pointer-events:none}
.brush-link:hover>span{transform:translate(2px,-2px)}
.consulting-row>.brush-link{align-self:center}
.join-card>.brush-link{margin-top:18px}
/* Account forms share one stationary page frame; only this region transitions. */
.auth-page:has(.auth-switcher){align-items:flex-start;padding-top:clamp(150px,22svh,230px)}
.auth-panel:has(.auth-switcher){width:430px}
.auth-intro{margin:20px 0 30px}
.auth-form{font-family:'Open Sans',Arial,sans-serif}
.auth-form label{display:block;font-size:12px;margin-bottom:8px;font-weight:600}
.auth-form input{display:block;width:100%;min-height:49px;border:1px solid var(--line);border-radius:0;background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink);font:14px 'Open Sans',Arial,sans-serif;padding:12px 14px;margin:0 0 18px}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:3px}
.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-form .button{margin-top:7px}
.auth-status{font:12px/1.7 'Open Sans',Arial,sans-serif;margin:12px 0 0;color:var(--muted)}
.auth-status:empty{display:none}.auth-status.is-error{color:#ba255d}.dark-style .auth-status.is-error{color:#ff8db2}
.auth-divider{display:flex;align-items:center;gap:14px;margin:26px 0 16px;font:10px 'Open Sans',Arial,sans-serif;color:var(--muted)}
.auth-divider::before,.auth-divider::after{content:'';height:1px;background:var(--line);flex:1}
.social-options{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.social-option[data-provider="microsoft_public"]{grid-column:1/-1}
.social-option{padding:12px 4px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--muted);font:12px 'Open Sans',Arial,sans-serif;cursor:not-allowed}
.social-option:not(:disabled){color:var(--ink);cursor:pointer}
.social-option:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.social-option.microsoft-option{grid-column:1/-1;justify-self:center;padding:0;border:0;background:transparent}
.microsoft-option img{display:block;width:104px;height:41px}
.microsoft-option .microsoft-dark,.dark-style .microsoft-option .microsoft-light{display:none}
.dark-style .microsoft-option .microsoft-dark{display:block}
.social-option small{display:block;font-size:8px;margin-top:5px;opacity:.8}
.auth-alternative a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.auth-hint{font:11px/1.7 'Open Sans',Arial,sans-serif;color:var(--muted);margin:-8px 0 18px}
.auth-form .code-input{font-size:26px;letter-spacing:.45em;padding:15px 18px}
.verification-heading h2{font:500 23px/1.3 Public,Arial,sans-serif;letter-spacing:-.025em}
.verification-heading .auth-description{font-size:13px;margin:12px 0 22px;overflow-wrap:anywhere}
.code-actions{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:12px;font:11px 'Open Sans',Arial,sans-serif}
.code-actions button,.signout-link{border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;padding:0}
.code-actions button:disabled{color:var(--muted);cursor:default}.auth-form button:disabled{opacity:.65;cursor:wait}
.account-greeting{font:12px 'Open Sans',Arial,sans-serif;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signout-link{font:600 11px 'Open Sans',Arial,sans-serif;white-space:nowrap}
[data-signed-in][hidden],[data-auth-link][hidden]{display:none!important}
@media(max-width:700px){.auth-page:has(.auth-switcher){padding-top:145px}.auth-panel:has(.auth-switcher){width:430px}.account-greeting{display:none}.name-fields{gap:10px}}

.auth-panel .button{transition:transform .25s,box-shadow .25s,background .25s,color .25s}

.account-menu{position:relative;font:600 11px 'Open Sans',Arial,sans-serif}.account-menu summary{cursor:pointer;list-style:none}.account-menu summary::-webkit-details-marker{display:none}.account-menu summary::after{content:'⌄';margin-left:6px}.account-menu-panel{position:absolute;right:0;top:calc(100% + 18px);width:220px;padding:18px;display:grid;gap:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}.account-menu-panel .signout-link{text-align:left;white-space:normal}.account-menu-panel .account-greeting{display:block}.account-notice{font-size:11px;font-weight:400;line-height:1.5;color:var(--ink)}

.github-option{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 9px}
.github-option img{flex:none}.dark-style .github-option img{filter:invert(1)}
.github-option:not(:disabled):hover{background:var(--paper);border-color:var(--ink)}

/* The same brush-underlined wordmark stays mounted across every portal route. */
.topbar .wordmark{position:relative;display:inline-block;line-height:1.2;padding-bottom:8px;color:var(--ink);background:none}
.topbar .wordmark::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:url('/assets/spectrum-brush.svg') center/100% 100% no-repeat;pointer-events:none}
.topbar .wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:6px}