/* The settled hero becomes a guided product tour. */
.workspace-journey { height:1200svh; }
.workspace-stage .journey-computer { transform:translate(var(--computer-x,0px),var(--computer-y,0px)) scale(var(--computer-scale,1)); }
.site-header.site-header--cosmic { position:fixed; inset:0 0 auto; z-index:50; height:72px; padding:0 6%; display:flex; gap:32px; background:#090a0de8; backdrop-filter:blur(18px); border-bottom:1px solid #ffffff10; color:#e8e8ec; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s; }
.site-header.site-header--cosmic.is-visible { visibility:visible; opacity:1; pointer-events:auto; }
.site-header.site-header--cosmic .wordmark img { width:32px; height:32px; }
.site-header.site-header--cosmic nav { display:flex; gap:28px; margin-left:10px; background:none; }
.site-header.site-header--cosmic nav a { background:none; clip-path:none; padding:0; min-height:40px; color:#a6a7af; font-size:13px; }
.site-header.site-header--cosmic nav a:hover { color:white; }
.site-header.site-header--cosmic .header-cta { margin-left:auto; border-radius:7px; min-height:36px; padding:0 16px; font-size:12px; color:#17181a; background:#f0f0f2; }
.product-story { position:absolute; z-index:8; left:6%; top:50%; width:29%; opacity:var(--story-opacity,0); pointer-events:none; }
.product-beat { position:absolute; width:100%; transform:translateY(calc(-50% + 18px)); opacity:0; visibility:hidden; transition:opacity .25s,transform .3s; }
.product-beat.is-active { opacity:1; visibility:visible; transform:translateY(-50%); }
.story-number { color:#8f83ba; font-size:10px; font-weight:600; letter-spacing:.15em; }
.product-beat h2 { font-size:clamp(30px,3.3vw,56px); color:#f2f1f5; font-weight:550; line-height:1.08; letter-spacing:-.045em; margin:24px 0; }
.product-beat p { color:#96979f; font-size:clamp(14px,1.3vw,18px); line-height:1.65; max-width:350px; }
.clean-traffic { position:absolute; left:20px; top:18px; z-index:8; display:flex; gap:9px; opacity:var(--clean-traffic-opacity,0); pointer-events:none; }
.clean-traffic i { width:13px; height:13px; border-radius:50%; background:#ff5f57; }
.clean-traffic i:nth-child(2) { background:#febc2e; }
.clean-traffic i:nth-child(3) { background:#28c840; }
.platform-stage .hop-usage { opacity:var(--usage-opacity,0); transform:translateY(calc(12px * (1 - var(--usage-opacity,0)))); }
.project-space-list { opacity:var(--workspaces-opacity,0); }
.project-space-list { display:grid; gap:2px; margin-top:2px; padding:0; }
.project-space-list div { padding:5px 6px; border-radius:5px; background:transparent; }
.project-space-list b { display:block; color:#b5b5bd; font-size:11px; font-weight:500; }
.project-space-list small { display:block; margin-top:1px; color:#6e6f77; font-size:9px; }
.website-window .hero--cosmic .hero-cta { min-height:64px; font-size:18px; padding:0 30px; gap:28px; }
.website-window .hero--cosmic .hero-cta svg { width:22px; height:22px; }
.website-window .hero--cosmic .hero-build-note { font-size:12px; }
@media(max-width:760px) {
 .site-header.site-header--cosmic { height:62px; padding:0 6%; gap:18px; }
 .site-header.site-header--cosmic nav { position:static; width:auto; flex-direction:row; gap:16px; margin:0; padding:0; border:0; box-shadow:none; }
 .site-header.site-header--cosmic nav a { font-size:11px; }
 .site-header.site-header--cosmic .menu-toggle { display:none; }
 .site-header.site-header--cosmic .header-cta { font-size:10px; padding:0 10px; margin-right:0; }
 .site-header.site-header--cosmic .header-cta svg { display:none; }
 .product-story { top:155px; left:6%; width:88%; }
 .product-beat h2 { font-size:28px; margin:10px 0; }
 .product-beat h2 br { display:none; }
 .product-beat p { font-size:13px; line-height:1.45; max-width:460px; }
 .product-story~.journey-computer { max-height:100%; }
 .website-window .hero--cosmic .hero-cta { min-height:58px; font-size:16px; padding:0 24px; }
 .project-space-list { gap:4px; padding:0; }
 .project-space-list b { font-size:8px; }
 .project-space-list small { display:none; }
}

@media(max-width:760px) {
 .workspace-stage .journey-computer { height:calc(100% - var(--mobile-tour-cut,0px)); }
 .site-header.site-header--cosmic nav a:last-child { display:none; }
}

.product-beat.is-active .tour-dots { pointer-events:auto; }
.tour-dots { display:flex; align-items:center; gap:0; margin:0 0 18px -5px; }
.tour-dots button { display:grid; place-items:center; width:20px; height:30px; padding:0; border:0; background:transparent; cursor:pointer; }
.tour-dots button::after { content:""; width:6px; height:6px; border-radius:50%; background:#55565e; transition:background .2s,transform .2s; }
.tour-dots button[aria-current="step"]::after { background:#e7e3f4; transform:scale(1.35); }
.tour-dots button:hover::after { background:#b3a3e2; }
.tour-dots button:focus-visible { outline:1px solid #b3a3e2; border-radius:6px; }

@media(min-width:761px) {
 .product-story { left:6%; width:26%; }
 .product-beat h2 { font-size:clamp(28px,2.8vw,48px); }
}

/* One persistent set of controls interpolates into the sidebar. */
.platform-stage .hop-traffic { visibility:hidden; }
.clean-traffic { left:var(--traffic-x,20px); top:var(--traffic-y,18px); gap:var(--traffic-gap,9px); will-change:top,left; }
.clean-traffic i { width:var(--traffic-size,13px); height:var(--traffic-size,13px); }

/* Stable vertical pagination beside vertically travelling copy. */
.product-story > .tour-dots { position:absolute; left:clamp(-54px, -4vw, -30px); top:0; transform:translateY(-50%); flex-direction:column; gap:0; margin:0; pointer-events:auto; }
.product-story > .tour-dots button { width:24px; height:20px; }
.product-beat { transform:translateY(calc(-50% + 120px)); filter:blur(7px); transition:opacity .42s ease,transform .48s cubic-bezier(.22,1,.36,1),filter .42s ease,visibility 0s .48s; }
.product-beat.is-before { transform:translateY(calc(-50% - 120px)); }
.product-beat.is-active { transform:translateY(-50%); filter:blur(0); transition-delay:0s; }
@media(prefers-reduced-motion:reduce) { .product-beat,.product-beat.is-before,.product-beat.is-active { transform:translateY(-50%); filter:none; transition:none; } }

/* Tab marks identify the content rather than the agent brand. */
.hop-tab-icon img,.content-tab-icon img { width:100%; height:100%; object-fit:contain; }
.hop-tab-icon > span { display:block; width:100%; height:100%; }
.hop-tab-icon .terminal-tab-icon { display:none; }
.hop-tab[data-content-type="terminal"] .website-tab-icon { display:none; }
.hop-tab[data-content-type="terminal"] .terminal-tab-icon { display:block; color:#b7bbc4; }
.project-space-list .typed-tab { display:flex; align-items:flex-start; gap:5px; }
.typed-tab > span:last-child { min-width:0; }
.typed-tab b,.typed-tab small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.content-tab-icon { flex:none; display:block; width:14px; height:14px; color:#a5a8b0; }
.content-tab-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
@media(min-width:601px) { .content-tab-icon { width:1.08527cqw; height:1.08527cqw; } }

/* A paired tab retains its page identity with a terminal badge in front. */
.hop-tab[data-content-type="paired"] .hop-tab-icon { position:relative; }
.hop-tab[data-content-type="paired"] .website-tab-icon { display:block; width:85%; height:85%; }
.hop-tab[data-content-type="paired"] .terminal-tab-icon { display:block; position:absolute; right:-14%; bottom:-12%; width:76%; height:76%; color:#d2d9e4; background:#293a58; border-radius:2px; box-shadow:0 0 0 1px #293a58; }
.hop-tab[data-content-type="paired"] .terminal-tab-icon svg { width:100%; height:100%; stroke-width:1.5; }

/* Subtle space-color tint instead of an opaque pale tile. */
.hop-project-rail .is-current { background:rgb(255 255 255 / 12%); }
.hop-project-rail .is-current img { filter:brightness(1.65) saturate(.65); }

/* One centered column for every workspace, including the selected tile. */
.hop-project-rail { align-items:center; }
.hop-project-rail > span { align-self:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-left:0; margin-right:0; padding:0; line-height:0; }
.hop-project-rail > span > svg,.hop-project-rail > span > img { display:block; flex-shrink:0; margin:0; }

/* Space slots expand in sequence, naturally pushing the add button down. */
.hop-project-rail > .hop-project-dots { --space-delay:0ms; }
.hop-project-rail > .hop-project-petal { --space-delay:140ms; }
.hop-project-rail > .hop-project-spark { --space-delay:280ms; }
.hop-project-rail > .hop-project-dots,
.hop-project-rail > .hop-project-petal,
.hop-project-rail > .hop-project-spark { height:0; opacity:0; overflow:hidden; transition:height 350ms cubic-bezier(.22,1,.36,1),opacity 180ms ease; transition-delay:0ms; }
.hop-project-rail > .hop-project-dots > svg,
.hop-project-rail > .hop-project-petal > svg,
.hop-project-rail > .hop-project-spark > svg { transform:translateY(8px) scale(.45); transition:transform 350ms cubic-bezier(.16,1.35,.35,1); }
.spaces-revealed .hop-project-rail > .hop-project-dots,
.spaces-revealed .hop-project-rail > .hop-project-petal,
.spaces-revealed .hop-project-rail > .hop-project-spark { height:24px; opacity:1; transition-delay:var(--space-delay); }
.spaces-revealed .hop-project-rail > .hop-project-dots > svg,
.spaces-revealed .hop-project-rail > .hop-project-petal > svg,
.spaces-revealed .hop-project-rail > .hop-project-spark > svg { transform:translateY(0) scale(1); transition-delay:var(--space-delay); }
@media(min-width:601px) {
 .spaces-revealed .hop-project-rail > .hop-project-dots,
 .spaces-revealed .hop-project-rail > .hop-project-petal,
 .spaces-revealed .hop-project-rail > .hop-project-spark { height:2.17054cqw; }
}
@media(prefers-reduced-motion:reduce) {
 .hop-project-rail > span,.hop-project-rail > span > svg { transition:none !important; }
}
/* More providers, with the same legible icon and label size. */
.hop-usage { gap:10px; }
@media(min-width:601px) { .hop-usage { gap:0.65cqw; } }

@media(min-width:761px) {
 .project-space-list { gap:0.15504cqw; margin-top:0.15504cqw; }
 .project-space-list .typed-tab { height:2.79070cqw; padding:0.46512cqw; gap:0.38760cqw; }
 .project-space-list b { font-size:0.85271cqw; line-height:1.25; }
 .project-space-list small { font-size:0.77519cqw; line-height:1.3; margin-top:0; }
 .project-space-list .content-tab-icon { width:0.93023cqw; height:0.93023cqw; }
}

/* Performance story: the same quiet dark palette as the product tour. */
#main > .stack-card.mac-section { background:#090a0d; color:#f2f1f5; border-top:1px solid #ffffff0d; }
.mac-section .performance-shell { max-width:none; padding:110px 6% 80px; }
.performance-heading { max-width:850px; }
.performance-label { font-size:11px; font-weight:600; letter-spacing:.12em; color:#b19ae8; }
.performance-heading h2 { margin:24px 0; font-size:clamp(42px,5.1vw,76px); line-height:1.04; letter-spacing:-.055em; font-weight:550; }
.performance-heading h2 span { color:#92939e; }
.performance-heading > p { max-width:630px; color:#a1a2ac; font-size:17px; line-height:1.7; }
.performance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:52px; }
.performance-grid article { padding:30px; border:1px solid #ffffff12; border-radius:16px; background:linear-gradient(145deg,#17151e,#0d0e12 65%); }
.performance-grid svg { display:block; width:32px; height:32px; fill:none; stroke:#b19ae8; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:25px; }
.performance-category { font-size:10px; letter-spacing:.1em; color:#92939e; }
.performance-grid h3 { font-size:clamp(25px,2.4vw,36px); font-weight:500; letter-spacing:-.035em; line-height:1.15; margin:18px 0; }
.performance-grid p { color:#a1a2ac; font-size:14px; line-height:1.7; max-width:340px; }
.performance-focus { display:block; margin-top:30px; padding-top:20px; border-top:1px solid #ffffff0d; font-size:11px; color:#777985; }
.performance-status { display:flex; align-items:center; gap:9px; margin-top:28px; font-size:12px; color:#858692; }
.performance-status > span { width:5px; height:5px; flex:none; border-radius:50%; background:#a58bcf; }
@media(max-width:760px) { .mac-section .performance-shell { padding:80px 6% 50px; } .performance-heading > p { font-size:15px; } .performance-grid { grid-template-columns:1fr; margin-top:32px; } .performance-grid article { padding:25px; } .performance-grid h3 br { display:none; } .performance-status { line-height:1.6; align-items:baseline; } }

/* Soft light from the feature copy falls across the app's near edge. */
.product-beat h2 { text-shadow:0 0 20px rgb(255 255 255 / 13%),0 0 54px rgb(255 255 255 / 7%); }
.product-beat p { text-shadow:0 0 22px rgb(255 255 255 / 5%); }
.tour-reflected-light { position:absolute; z-index:7; pointer-events:none; left:42%; top:50%; width:18%; height:64%; transform:translateY(-50%); opacity:var(--story-opacity,0); background:radial-gradient(ellipse at 0% 50%,rgb(245 247 255 / 9%),rgb(245 247 255 / 3%) 32%,transparent 72%); mix-blend-mode:screen; }
.tour-reflected-light::before { content:""; position:absolute; left:0; top:5%; bottom:5%; width:1px; background:linear-gradient(transparent,rgb(255 255 255 / 20%),transparent); }
@media(max-width:760px) { .tour-reflected-light { display:none; } }

/* The space rail begins alongside favorites, not below them. */
.hop-project-rail { transform:translateY(-32px); position:relative; z-index:2; }
@media(min-width:601px) { .hop-project-rail { transform:translateY(-2.24806cqw); } }
@media(max-width:600px) { .hop-project-rail { transform:none; } }
/* Broad edge illumination with a flat falloff, rather than a circular spot. */
.tour-reflected-light { width:5%; height:48%; background:linear-gradient(90deg,rgb(245 247 255 / 6%),rgb(245 247 255 / 1.5%) 32%,transparent); mask-image:linear-gradient(transparent,black 18%,black 78%,transparent); }
.tour-reflected-light::before { top:0; bottom:0; background:linear-gradient(transparent,rgb(255 255 255 / 32%) 25%,rgb(255 255 255 / 26%) 75%,transparent); }

/* The selected tab borrows its favicon's accent, at the same 12% as spaces. */
.hop-tab.is-active { --tab-accent:255 255 255; background:rgb(var(--tab-accent) / 12%); }
.hop-tab[data-content-type="paired"] .terminal-tab-icon { background:#272233; box-shadow:0 0 0 1px #272233; }

.tour-reflected-light { opacity:calc(var(--story-opacity,0) * var(--reflection-strength,1)); will-change:top,opacity; }

/* Keep the footer in the same dark palette as the page. */
.site-footer { background:#000; color:#a1a2ac; border-top:1px solid #ffffff12; --line:#ffffff12; }
.site-footer > p, .site-footer > div { color:#a1a2ac; }

/* Scroll intent previews the next beat, then settles or commits. */
.product-beat.is-active { transform:translateY(calc(-50% + var(--gesture-y,0px))); filter:blur(var(--gesture-blur,0px)); opacity:var(--gesture-opacity,1); }
.is-gesture-preview .product-beat { transition:transform 70ms linear,filter 70ms linear,opacity 70ms linear; }
.tour-dots button.is-approaching::after { background:color-mix(in srgb,#55565e, #e7e3f4 calc(var(--approach,0) * 100%)); box-shadow:0 0 calc(12px * var(--approach,0)) rgb(231 227 244 / 65%); transform:scale(calc(1 + .35 * var(--approach,0))); }
@media(prefers-reduced-motion:reduce) { .product-beat.is-active { transform:translateY(-50%); filter:none; } }

/* Performance is a concrete set of engineering priorities, not feature cards. */
.performance-heading--direct { display:grid; grid-template-columns:1.2fr 1fr; column-gap:9%; align-items:end; }
.performance-heading--direct .performance-label { grid-column:1/-1; }
.performance-heading--direct h2 { font-size:clamp(48px,5.5vw,84px); line-height:1.02; margin-bottom:0; }
.performance-heading--direct > p { margin:0 0 5px; max-width:460px; font-size:17px; line-height:1.7; }
.performance-priorities { margin-top:64px; border-top:1px solid #ffffff25; }
.performance-priorities-header,.performance-priority { display:grid; grid-template-columns:1fr 2fr 1fr; gap:36px; }
.performance-priorities-header { padding:17px 0; color:#777984; font-size:11px; }
.performance-priority { border-top:1px solid #ffffff12; padding:28px 0; align-items:center; }
.performance-resource { display:flex; flex-direction:column; gap:10px; }
.resource-name { color:#d4c6f0; font-size:clamp(38px,4vw,58px); line-height:1; font-weight:550; letter-spacing:-.05em; }
.resource-unit { color:#888894; font-size:9px; letter-spacing:.12em; }
.performance-priority h3 { color:#f2f1f5; font-size:clamp(19px,1.8vw,26px); font-weight:500; letter-spacing:-.025em; margin:0 0 10px; }
.performance-priority p { color:#9c9da6; font-size:14px; line-height:1.6; max-width:470px; margin:0; }
.performance-scenario { color:#9697a1; font-size:12px; line-height:1.9; border-left:1px solid #ffffff12; padding-left:24px; }
@media(max-width:760px) {
 .performance-heading--direct { display:block; }
 .performance-heading--direct > p { margin-top:24px; font-size:15px; }
 .performance-priorities { margin-top:36px; }
 .performance-priorities-header { display:none; }
 .performance-priority { grid-template-columns:70px 1fr; gap:20px; padding:25px 0; }
 .resource-name { font-size:36px; }
 .resource-unit { font-size:7px; letter-spacing:0; }
 .performance-scenario { grid-column:2; padding-left:12px; }
}

/* One uninterrupted backdrop from the feature tour into performance. */
:root { --section-backdrop:#090a0d; }
.workspace-journey,.workspace-stage { background:var(--section-backdrop); }
#main > .stack-card.mac-section { background:var(--section-backdrop); border:0; box-shadow:none; }

.hop-favorites > span > img { display:block; width:100%; height:100%; object-fit:contain; }

/* Primary download and secondary product tour. */
.hero-cta-row { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.website-window .hero--cosmic .hero-download { gap:12px; font-family:inherit; border:0; }
.hero-download:disabled { opacity:1; cursor:default; }
.hero-explore { display:inline-flex; align-items:center; gap:12px; min-height:56px; color:#e8e8ec; font-size:17px; text-decoration:none; white-space:nowrap; }
.hero-explore svg { width:20px; height:20px; }
.hero-explore:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
.hero-explore:focus-visible { outline:2px solid #b19ae8; outline-offset:6px; border-radius:4px; }
@media(max-width:600px) { .hero-cta-row { flex-direction:column; gap:4px; } .hero-explore { font-size:16px; min-height:44px; } }

/* Bottom-up usage reveal and a top-layer detail card. */
.hop-meter { transform-origin:center bottom; }
.usage-detail { position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:20px; background:#262626; color:#ececec; border:1px solid #606060; border-radius:24px; box-shadow:0 16px 40px #0008,inset 0 1px 0 #ffffff12; font:15px/1.5 system-ui,sans-serif; }
.usage-detail:popover-open { animation:usage-detail-in 180ms ease-out; }
.usage-detail header,.usage-detail header span,.usage-detail-label { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.usage-detail header span { justify-content:flex-start; }
.usage-detail header svg { width:24px; height:24px; }
.usage-detail header strong { font-size:20px; }
.usage-detail small,.usage-detail p,.usage-detail footer { color:#aaa; }
.usage-detail header button { background:none; border:0; color:#aaa; font-size:24px; cursor:pointer; padding:0 5px; }
.usage-detail-label { margin-top:24px; font-size:17px; }
.usage-detail-track { height:3px; background:#383838; margin-top:7px; border-radius:3px; }
.usage-detail-track i { display:block; height:100%; width:42%; background:#aaa; border-radius:3px; }
.usage-detail p { margin:8px 0 24px; }
.usage-detail footer { font-size:12px; }
@keyframes usage-detail-in { from { opacity:0; transform:translateX(-8px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .usage-detail:popover-open { animation:none; } }

.site-header.site-header--cosmic.is-framed-hero { border-bottom-color:transparent; }
.workspace-stage .journey-computer { transform:translate(var(--computer-x,0px),calc(var(--computer-y,0px) + var(--milestone-nudge,0px))) scale(var(--computer-scale,1)); }

/* Keep the magnetic pull continuous, including the header and release hint. */
.site-header.site-header--cosmic.is-visible { opacity:var(--header-reveal,1); }
@property --milestone-nudge { syntax:'<length>'; inherits:true; initial-value:0px; }
.workspace-stage { transition:--milestone-nudge 240ms cubic-bezier(.2,.8,.2,1); }
.workspace-stage.is-gesture-preview { transition:--milestone-nudge 70ms linear; }
@media(prefers-reduced-motion:reduce) { .workspace-stage { transition:none; } }

/* Presentation-only usage detail: never intercept pointer input. */
.usage-detail { pointer-events:none; }

.site-header .header-cta:disabled { opacity:1; cursor:default; font-family:inherit; border:0; }
.site-header .header-cta svg { width:16px; height:16px; }
.hero--cosmic .cosmic-scroll { display:flex; flex-direction:column; gap:8px; width:auto; height:auto; border:0; border-radius:0; background:none; color:#c5c5cd; text-decoration:none; }
.cosmic-scroll .scroll-cue-label { font-size:13px; line-height:1.4; white-space:nowrap; }
.cosmic-scroll .scroll-cue-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid #ffffff24; border-radius:50%; }
.hop-meter.is-showcased { background:#ffffff12; border-radius:7px; box-shadow:0 0 0 5px #ffffff12; }
.usage-detail { overflow:visible; }
.usage-detail::before { content:""; position:absolute; left:-8px; top:var(--pointer-y,58px); width:14px; height:14px; background:#262626; border-left:1px solid #606060; border-bottom:1px solid #606060; transform:translateY(-50%) rotate(45deg); }

/* Product-like usage spacing: selection sits inside the rail, not outside it. */
.hop-usage { padding:10px 5px 7px; gap:2px; }
.hop-meter { box-sizing:border-box; padding:6px 7px; gap:10px; min-height:34px; border-radius:7px; }
.hop-meter.is-showcased { background:#ffffff14; box-shadow:none; }
.hop-meter i { margin-top:5px; border-radius:2px; }
.hop-meter i:after { border-radius:2px; }
@media(min-width:601px) {
 .hop-usage { padding:.55cqw .42cqw .42cqw; gap:.14cqw; }
 .hop-meter { height:2.2cqw; min-height:0; padding:.35cqw .51cqw; gap:.93cqw; border-radius:.4cqw; }
 .hop-meter i { margin-top:.38cqw; }
}
.usage-detail { padding:22px 24px 20px; }
.usage-detail-label { margin-top:26px; }
.usage-detail p { margin:7px 0 26px; }

/* Space creation is a presentation, not a second interactive application. */
/* Match the native 570px dialog proportions at every preview size. */
.space-preview { position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:1.23em; border:1px solid #626262; border-radius:1.62em; background:#262626; color:#eee; font:19px/1.2 system-ui,sans-serif; box-shadow:0 18px 50px #0008,inset 0 1px 0 #ffffff12; overflow:visible; pointer-events:none; }
.space-preview:popover-open { animation:usage-detail-in 220ms ease-out; }
.space-preview::before { content:""; position:absolute; left:-8px; top:var(--pointer-y); width:14px; height:14px; background:#262626; border-left:1px solid #626262; border-bottom:1px solid #626262; transform:translateY(-50%) rotate(45deg); }
.space-preview h3 { font-size:1.08em; margin:0 0 1.1em; letter-spacing:-.02em; }
.space-customize { display:flex; gap:.92em; align-items:center; margin-bottom:1.15em; }
.space-icon-preview { display:grid; place-items:center; background:#2d2d2d; color:#f1a631; border-radius:.77em; width:4.92em; height:4.92em; flex:none; }
.space-icon-preview svg { width:2.62em; height:2.62em; fill:currentColor; stroke:#d38b21; stroke-width:1; }
.space-colors { display:flex; gap:.46em; margin-bottom:.85em; align-items:center; }
.space-colors i { width:1.38em; height:1.38em; flex:none; border-radius:50%; background:var(--swatch); }
.space-colors .chosen { outline:3px solid #ddd; outline-offset:2px; }
.space-colors .rainbow { background:conic-gradient(#ef7428,#df4b9b,#3375df,#1e9c70,#f1a631,#ef7428); box-shadow:inset 0 0 0 2px #ddd; }
.space-options { display:flex; gap:.62em; font-size:.88em; }
.space-options span,.space-folder span,.space-preview-actions span { display:flex; align-items:center; justify-content:center; box-sizing:border-box; border-radius:.4em; background:#363636; white-space:nowrap; }
.space-options span { height:1.75em; padding:0 .95em; gap:.75em; }
.space-options svg,.space-folder svg { width:1.08em; height:1.08em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.space-field { display:flex; align-items:center; gap:.6em; margin-top:.69em; }
.space-field>span { width:3.1em; flex:none; text-align:right; }
.space-name { flex:1; min-width:0; padding:.38em .3em; background:#303030; border:2px solid #2586ba; box-shadow:0 0 0 3px #2586ba50; border-radius:.55em; }
.space-folder { display:flex; flex:1; align-items:center; gap:.69em; color:#aaa; }
.space-folder span { margin-left:auto; color:#ddd; width:6.15em; height:1.85em; }
.space-preview-actions { display:flex; justify-content:flex-end; gap:.62em; margin-top:1.23em; }
.space-preview-actions span { width:5.08em; height:1.85em; }
.space-preview-actions span:last-child { width:8.15em; background:#087fff; color:white; }
.hop-project-rail .hop-add-space.space-showcased { background:rgb(255 255 255 / 12%); color:#aaa; border-color:transparent; }
@media(prefers-reduced-motion:reduce) { .space-preview:popover-open { animation:none; } }

/* Fixed optical bounds prevent intrinsic SVG dimensions stretching the row. */
.hop-favorites > span { position:relative; display:flex; align-items:center; justify-content:center; }
.hop-favorites > span > img,.hop-favorites > span > svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; }
.hop-favorites > .hop-favorite-design > img { width:64%; height:95%; }
.hop-favorites > .hop-favorite-code > img { width:92%; height:92%; }
.hop-favorites > .hop-favorite-agent > svg { width:100%; height:100%; }
.hop-favorites > .hop-favorite-mail > img { width:108%; height:108%; }

/* The new-space selection uses the same footprint as the current space. */
.hop-project-rail .hop-add-space { box-sizing:border-box; width:28px; height:28px; border-radius:7px; }
@media(min-width:601px) { .hop-project-rail .hop-add-space { width:2.17054cqw; height:2.17054cqw; border-radius:.54264cqw; } }

/* Let the app pass behind a clear global navigation during the full tour. */
.site-header.site-header--cosmic.is-over-journey { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent; }
.usage-detail { z-index:40; }
.usage-detail[hidden] { display:none; }
.usage-detail.is-open { animation:usage-detail-in 180ms ease-out; }
@media(prefers-reduced-motion:reduce) { .usage-detail.is-open { animation:none; } }

/* A quiet invitation on the star-only opening screen. */
.intro-scroll-hint { position:absolute; z-index:8; bottom:max(26px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; white-space:nowrap; pointer-events:none; opacity:var(--intro-hint-opacity,1); font:400 11px/1.4 'DM Sans',sans-serif; letter-spacing:.035em; color:#9a9ca6; }
.intro-scroll-hint > span:first-child { background:linear-gradient(105deg,#858792 20%,#e7e8ed 48%,#858792 76%); background-size:250% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:intro-hint-shimmer 4s ease-in-out infinite; }
.intro-scroll-hint > span:last-child { font-size:13px; opacity:.65; }
@keyframes intro-hint-shimmer { 0%,15% { background-position:100% 0; } 85%,100% { background-position:0% 0; } }
@media(prefers-reduced-motion:reduce) { .intro-scroll-hint > span:first-child { animation:none; background:none; color:#a8aab2; } }

/* Pixel lettering remains sharp at every display density. */
.resource-name.resource-name--pixel { color: #fff; line-height: 1; }
.resource-pixels { display: block; height: 42px; width: auto; overflow: visible; }
@media (max-width: 600px) { .resource-pixels { height: 28px; } }

.button .beta-badge { display: inline-block; flex: 0 0 auto; color: #505057; background: none; border: 0; padding: 0; font: 500 9px/1.1 'DM Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 600px) { .button .beta-badge { font-size: 8px; } }