/* Selected hub concept A. Every override is scoped away from the intro. */
body:has(.resource-hub){font-family:var(--font-ui)}
.hub-header,.resource-hub,body:has(.resource-hub) footer{max-width:1568px;padding-left:64px;padding-right:64px}
.hub-header{min-height:100px;border:0}
.hub-header .brand{font-size:1.8125rem;font-weight:600;display:flex;align-items:center;gap:9px}
.hub-header .brand small{font-size:.6875rem;letter-spacing:.05em;border:1px solid #485155;border-radius:5px;margin:0;padding:0 5px;color:var(--muted)}
.hub-header nav{font-size:.75rem;gap:8px}
.hub-header nav [aria-current]{background:var(--surface-raised);color:var(--text);text-decoration:none}
.resource-hub .hero{padding:56px 0 50px}
.resource-hub .desktop-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
.resource-hub h1{font-size:clamp(2.25rem,3.65vw,3.625rem);font-weight:500;line-height:1.1;letter-spacing:-.05em;max-width:860px;margin:0;grid-column:1}
.resource-hub h1[tabindex="-1"]:focus{outline:none}
.resource-hub .desktop-intro>p{max-width:620px;font-size:1.0625rem;margin:0;grid-column:1}
.resource-hub .watch{grid-column:2;grid-row:2;display:flex;align-items:center;gap:12px;border:1px solid #77888f;border-radius:30px;padding:13px 20px;background:transparent;color:var(--text);font-size:.8125rem;white-space:nowrap}
.resource-hub .watch span{color:var(--accent)}
.resource-hub .watch:hover{background:var(--surface-raised)}
.resource-hub .ecosystem{display:block;padding-top:0}
.resource-hub .group{padding:30px 0 34px}
.resource-hub .group-heading{align-items:baseline;gap:16px;margin-bottom:22px}
.resource-hub .group-heading>div{display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex:1;min-width:0}
.resource-hub .index{font-size:.6875rem;color:var(--accent);border:0;padding:0}
.resource-hub h2{font-size:1.4375rem;font-weight:500;letter-spacing:-.03em;margin:0}
.resource-hub .group-heading p{font-size:.75rem;max-width:510px}
.resource-hub .resources{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.resource-hub .build .resources{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.resource-hub .resource{padding:0;border:1px solid #303538;border-radius:20px;background:#16181a;overflow:hidden;isolation:isolate}
.resource-art{display:block;line-height:0}
.resource-art img{display:block;width:100%;height:240px;object-fit:contain;mix-blend-mode:lighten;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.resource-copy{padding:0 32px 30px;flex:1;display:flex;flex-direction:column;min-width:0}
.resource-hub .resource .type{font-size:.6875rem;letter-spacing:.025em;margin:0 0 12px}
.resource-hub h3{font-size:1.625rem;font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:0 0 15px;overflow-wrap:anywhere}
.resource-hub .resource-copy>p:not(.type):not(.status){font-size:.875rem;line-height:1.6;max-width:480px;margin:0 0 26px}
.resource-hub .links{gap:12px 24px;color:var(--accent);padding:0}
.resource-hub .links a{font-size:.75rem;font-weight:400;text-decoration:none;overflow-wrap:anywhere}
.resource-hub .links a:hover{text-decoration:underline}
.resource-hub .status{align-self:start;color:var(--muted);border:1px solid #55515d;padding:4px 10px;border-radius:20px;font-size:.6875rem}
.resource-hub .resource.primary{grid-column:auto;grid-row:span 2}
.resource-hub .primary .resource-art{flex:1;display:flex;align-items:center}
.resource-hub .primary .resource-art img{height:340px}
.resource-hub .primary .resource-copy{flex:0}
.resource-hub .primary h3{font-size:2.5rem}
.resource-hub :is(#icons,#storybook){display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;min-height:260px}
.resource-hub :is(#icons,#storybook) .resource-art img{height:230px}
.resource-hub :is(#icons,#storybook) .resource-copy{padding:26px 28px 26px 0}
.resource-hub :is(#icons,#storybook) h3{font-size:1.5rem}
.resource-hub :is(#icons,#storybook) .resource-copy>p:not(.type){font-size:.8125rem}
.resource-hub .understand .resources{display:block}
.resource-hub #styleguide{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center}
.resource-hub #styleguide .resource-copy{padding:30px}
.resource-hub #styleguide .resource-art img{height:280px}
.resource-hub .external-note{margin:0 0 36px}
body:has(.resource-hub) footer{font-size:.75rem;padding-top:32px;padding-bottom:40px}
body:has(.resource-hub) #announcer{background:var(--surface-raised);color:var(--text)}
@media(min-width:1600px){.resource-art img{height:270px}}
@media(max-width:1100px){.hub-header,.resource-hub,body:has(.resource-hub) footer{padding-left:32px;padding-right:32px}.resource-hub .desktop-intro{gap:24px}.resource-hub .group-heading p{max-width:420px}.resource-hub :is(#icons,#storybook){grid-template-columns:minmax(0,40fr) minmax(0,60fr)}}
@media(max-width:1023px){
 .hub-header,.resource-hub,body:has(.resource-hub) footer{padding-left:24px;padding-right:24px}
 .resource-hub .desktop-intro,.resource-art{display:none!important}
 .resource-hub .hero{padding:30px 0 28px}.resource-hub h1{font-size:2rem;margin-bottom:18px;letter-spacing:-.025em}
 .resource-hub .group{padding:20px 0 12px;margin:0}.resource-hub .group-heading>div{display:block}.resource-hub .group-heading h2{margin-bottom:8px}
 .resource-hub .resources,.resource-hub .build .resources{grid-template-columns:minmax(0,1fr)}
 .resource-hub .resource.primary{grid-row:auto}
 .resource-hub :is(#icons,#storybook,#styleguide){display:flex;min-height:0}
 .resource-hub .resource-copy,.resource-hub :is(#icons,#storybook,#styleguide) .resource-copy{padding:24px}
 .resource-hub h3,.resource-hub .primary h3{font-size:1.5rem}
 .resource-hub .links a{font-size:.875rem;padding:5px 0}
}

/* Quiet presence: the copy stays flat; only the artwork follows the pointer. */
.resource-hub .resource{position:relative}
.resource-hub .resource::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(340px circle at var(--presence-x,50%) var(--presence-y,35%),rgba(114,218,211,.09),transparent 76%);opacity:0}
.resource-hub .resource-copy{position:relative;z-index:3}
.resource-hub .resource:focus-within{border-color:#638e90;box-shadow:inset 0 0 0 1px rgba(114,218,211,.10)}
.resource-hub .resource:focus-within::before{opacity:1}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
 .resource-hub .resource:hover{border-color:#527779}
 .resource-hub .resource:hover::before{opacity:1}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .resource-hub .resource{transition:transform 280ms cubic-bezier(.2,.7,.2,1),border-color 220ms ease,box-shadow 280ms ease}
 .resource-hub .resource::before{transition:opacity 260ms ease}
 .resource-hub .resource-art{transition:transform 360ms cubic-bezier(.2,.7,.2,1)}
 .resource-hub .resource[data-presence="true"]{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 0 0 1px rgba(114,218,211,.08)}
 .resource-hub .resource[data-presence="true"] .resource-art{transform:translate(var(--art-x,0px),var(--art-y,0px))}
}

/* The poster is the decoded first frame of the Higgsfield clip. Both layers
   share size and blending; no CSS crossfade or perspective changes the artwork. */
.resource-hub .resource-art{position:relative;background:#16181a;isolation:isolate}
.resource-hub .resource-art picture{display:block;width:100%}
.resource-hub .resource-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none;mix-blend-mode:lighten;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.resource-hub .primary .resource-video{height:340px;top:50%;translate:0 -50%}
.resource-hub .resource[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .resource-hub .resource[data-video-active="true"] .resource-video{visibility:visible}
 .resource-hub .resource[data-video-active="true"] picture{visibility:hidden}
}

/* Editorial hierarchy; illustration geometry and hover playback are preserved. */
.resource-hub .hero{padding-top:48px;padding-bottom:40px}
.resource-hub h1{font-size:clamp(2.25rem,3.65vw,3.625rem);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.resource-hub .desktop-intro>p{font-size:1.125rem;line-height:1.55;max-width:600px;margin-bottom:0}
.resource-hub .watch{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:var(--radius-control);font-size:.9375rem;font-weight:500;min-height:48px;padding:12px 20px}
.resource-hub .watch span{color:inherit}
.resource-hub .watch:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.resource-hub .group-heading p{font-size:.875rem;line-height:1.5;max-width:490px}
.resource-hub .index{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.resource-hub h2{font-size:1.5rem;letter-spacing:-.025em}
.resource-hub .resource{background:var(--surface-card);border-color:var(--border-subtle)}
.resource-hub .resource .type{font-size:.8125rem;letter-spacing:0;margin-bottom:10px}
.resource-hub h3{line-height:1.2;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:normal}
.resource-hub .resource-copy>p:not(.type):not(.status),.resource-hub :is(#icons,#storybook) .resource-copy>p:not(.type){font-size:.9375rem;line-height:1.6;margin-bottom:20px}
.resource-hub .links{gap:8px 24px}
.resource-hub .links a{font-size:.875rem;font-weight:500;line-height:1.5;padding:8px 0;text-decoration:underline;text-decoration-color:rgba(114,218,211,.5);text-decoration-thickness:1px}
.resource-hub .links a:hover{color:var(--accent-hover);text-decoration-color:currentColor}
.resource-hub .status{font-size:.8125rem;line-height:1.5;border-color:var(--border);background:var(--surface);border-radius:7px;padding:6px 10px}
body:has(.resource-hub) footer{font-size:.875rem;color:var(--muted)}
@media(max-width:1100px) and (min-width:1024px){
 .resource-hub .group-heading p{max-width:380px}
 .resource-hub :is(#icons,#storybook){grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
 .resource-hub :is(#icons,#storybook) .resource-copy{padding-right:24px}
 .resource-hub .resource-copy{padding-left:28px;padding-right:28px}
}
@media(max-width:1023px){
 .resource-hub .hero{padding:28px 0}
 .resource-hub .resource-copy>p:not(.type):not(.status),.resource-hub :is(#icons,#storybook) .resource-copy>p:not(.type){font-size:1rem}
 .resource-hub .links a{min-height:44px;display:inline-flex;align-items:center;gap:6px}
 .resource-hub h3{overflow-wrap:anywhere}
}