/* Original owner-supplied artwork. Fixed boxes avoid entrance layout shifts. */
.brand-artwork{display:inline-block;position:relative;vertical-align:middle;width:240px;max-width:100%;aspect-ratio:4.12;direction:ltr;line-height:0;flex-shrink:0}
.brand-artwork picture,.brand-artwork picture img,.brand-artwork>svg{display:block;width:100%;height:100%;object-fit:contain}
.brand-artwork>svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.bizhub-lockup:has(.brand-artwork){gap:0;max-width:100%;letter-spacing:normal}
.bizhub-lockup>.brand-artwork{white-space:normal}
.wordmark:has(.brand-artwork){gap:0;max-width:100%}
.wordmark>.brand-artwork{width:190px}
.brand-artwork picture img{max-width:none;border-radius:0}
.hero-brand{display:block;width:min(100%,510px);margin-bottom:22px}
.hero-brand .brand-artwork{display:block;width:100%}
.welcome-brand .brand-artwork{width:360px}
.welcome-brand .brand-row{justify-content:center}
.welcome-brand .independent{margin-top:10px;text-align:center}
.brand-artwork.is-playing picture{visibility:hidden}
.brand-artwork.is-playing .logo-letter:not(.logo-letter-k){animation:biz-letter .42s cubic-bezier(.2,.7,.25,1) var(--letter-delay) both}
.brand-artwork.is-playing .k-piece{animation:biz-k-assemble .5s cubic-bezier(.2,.7,.25,1) var(--piece-delay) both}
.brand-artwork.is-playing .logo-slogan{animation:biz-slogan-hold 3s linear both}
.brand-artwork.is-playing .slogan-phrase{animation:biz-phrase-one 3s ease-out both}
.brand-artwork.is-playing .slogan-phrase-1{animation-name:biz-phrase-two}
.brand-artwork.is-playing .slogan-phrase-2{animation-name:biz-phrase-three}
.brand-artwork.is-playing .slogan-dot-one{animation:biz-dot-one 3s linear both}
.brand-artwork.is-playing .slogan-dot-two{animation:biz-dot-two 3s linear both}
@keyframes biz-letter{from{opacity:0;transform:translateY(10%)}to{opacity:1;transform:translateY(0)}}
@keyframes biz-k-assemble{from{opacity:0;transform:translate(var(--piece-x),var(--piece-y))}to{opacity:1;transform:translate(0,0)}}
@keyframes biz-slogan-hold{from,to{opacity:1}}
@keyframes biz-phrase-one{0%,60%{opacity:0;transform:translateY(8%)}70%,100%{opacity:1;transform:translateY(0)}}
@keyframes biz-phrase-two{0%,65%{opacity:0;transform:translateY(8%)}75%,100%{opacity:1;transform:translateY(0)}}
@keyframes biz-phrase-three{0%,70%{opacity:0;transform:translateY(8%)}80%,100%{opacity:1;transform:translateY(0)}}
@keyframes biz-dot-one{0%,79%{opacity:0;filter:none}80%{opacity:1;filter:none}82.5%{opacity:1;filter:drop-shadow(0 0 5px #febf1799)}85%,100%{opacity:1;filter:none}}
@keyframes biz-dot-two{0%,84%{opacity:0;filter:none}85%{opacity:1;filter:none}87.5%{opacity:1;filter:drop-shadow(0 0 5px #febf1799)}90%,100%{opacity:1;filter:none}}
#welcome .motion-scene .alex-art{display:flex;justify-content:center;width:100%;height:100%}
#welcome .motion-scene .alex-art>.art{position:static;display:block;width:auto;max-width:100%;height:100%;margin:0;transform:none;inset:auto;object-fit:contain;object-position:center;border-radius:12px}
.hero-art>.alex-art{display:block;width:min(100%,300px)}
.hero-art>.alex-art>img{display:block;width:100%;height:auto;border-radius:16px}
.hero-mobile-scene>.alex-art{display:block;width:156px;max-width:46vw;margin:0 auto 8px}
.hero-mobile-scene>.alex-art>img{display:block;width:100%;height:auto;margin:0;border-radius:12px}
@media(max-width:899px){
 body:has(#welcome:not([hidden])) .welcome-brand{margin-bottom:14px}
 body:has(#welcome:not([hidden])) #welcome .motion-scene{height:clamp(110px,calc(100svh - 665px),215px);margin:0 auto 14px}
 body .welcome-brand .brand-artwork{width:100%;max-width:340px}
 .welcome-brand .bizhub-lockup{width:100%;justify-content:center}
 body:has(#welcome:not([hidden])) .shell{padding-top:16px}
 #welcome .welcome-copy{gap:14px}
 body:has(#welcome:not([hidden])) #welcome .intro{margin:0}
 body:has(#welcome:not([hidden])) .access{margin-top:12px;padding-top:12px}
 body:has(#welcome:not([hidden])) .dedication{margin-top:12px}
 body:has(#welcome:not([hidden])) .copyright{margin-top:12px}
 .bizhub-lockup .brand-artwork{width:220px}
}
@media(max-width:650px){
 .header .wordmark>.brand-artwork{width:180px}
 .hero-brand{width:min(100%,410px);margin-bottom:18px}
 .footer .wordmark>.brand-artwork{width:200px}
}

/* Entry comes before the page, rather than animating a small inline header. */
.brand-entry-pending body::before{content:'';position:fixed;inset:0;background:#0c1b2e;z-index:9998;pointer-events:none}
.brand-entry{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0c1b2e;padding:24px;color:#edf5fb;direction:ltr;isolation:isolate}
.brand-entry .brand-entry-art{display:block;width:min(720px,92vw);max-width:100%;flex:none}
.brand-entry-stack{display:flex;flex-direction:column;align-items:center;width:min(720px,100%)}
.brand-entry-skip{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));inset-inline-end:max(24px,env(safe-area-inset-right));min-height:44px;min-width:96px;padding:10px 16px;border:1px solid #46677e;border-radius:9px;background:#142c48;color:#edf5fb;font:600 14px/1.4 system-ui,sans-serif;cursor:pointer}
.brand-entry-skip:focus-visible{outline:3px solid #febf17;outline-offset:4px}
.brand-entry[data-mode=reduced] .logo-letter:not(.logo-letter-k),.brand-entry[data-mode=reduced] .k-piece{animation-name:biz-reduced-letter!important;transform:none!important}
.brand-entry[data-mode=reduced] .slogan-phrase{transform:none!important}
.brand-entry[data-mode=reduced] .slogan-dot-one,.brand-entry[data-mode=reduced] .slogan-dot-two{filter:none!important}
@keyframes biz-reduced-letter{from{opacity:0}to{opacity:1}}
/* Transparent illustration follows the page background, without a card. */
.hero-art>.alex-art>img,.hero-mobile-scene>.alex-art>img,#welcome .motion-scene .alex-art>.art{border-radius:0}