:root{color-scheme:dark;background:#000;--lg-text:#f3f3f6;--lg-muted:#b2b2bc;--lg-fill-hover:#c8c8db28;--lg-move:280ms;--lg-spring:cubic-bezier(.2,1.25,.35,1)}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:#000}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;color:var(--lg-text)}
.hero{display:grid;place-items:center;width:100%;height:100vh;height:100dvh;overflow:hidden}
.slide{position:relative;width:min(100vw,177.7777778vh);height:min(56.25vw,100vh);overflow:hidden;background:#000}
@supports(height:100dvh){.slide{width:min(100vw,177.7777778dvh);height:min(56.25vw,100dvh)}}
.slide>*{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
#poster{z-index:0}
#fallback,#cats,#lettering{visibility:hidden}
#fallback{z-index:1}
#cats{z-index:2}
#lettering{z-index:3}
body[data-renderer="webgl"] #cats,body[data-renderer="webgl"] #lettering{visibility:visible}
body[data-renderer="video"] #fallback{visibility:visible}
@media(prefers-reduced-motion:reduce){#fallback,#cats,#lettering{visibility:hidden!important}}
.employee{display:grid;place-items:center;padding:40px 24px max(72px,env(safe-area-inset-bottom));background:#000}
.employee-card{display:grid;justify-items:center;gap:16px;width:204px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.portrait-frame{display:block;width:100%;padding:7px;border:1px solid #85868c;background:linear-gradient(145deg,#4c4d51,#1b1c1f 38%,#060607 60%,#55565a);box-shadow:inset 0 0 0 1px #fff2,0 8px 30px #0008;transition:transform 280ms cubic-bezier(.2,.8,.2,1)}
.portrait-frame img{display:block;width:100%;height:auto;border:1px solid #65666a;box-shadow:0 0 0 2px #0b0b0d}
.portrait-label{font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:#c5c5ca}
.employee-card:focus-visible{outline:2px solid #a7a8b0;outline-offset:10px;border-radius:2px}
@media(hover:hover){.employee-card:hover .portrait-frame{transform:translateY(-2px)}}
.employee-card:active .portrait-frame{transform:scale(.985)}
body.portrait-open{overflow:hidden}
#employee-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:72px 24px;border:0;background:transparent;overflow:hidden}
#employee-dialog[open]{display:grid;place-items:center}
#employee-dialog::backdrop{background:#000e;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#employee-full{display:block;width:min(880px,calc(100vw - 48px),calc(100vh - 144px));width:min(880px,calc(100vw - 48px),calc(100dvh - 144px));height:auto;max-height:100%;object-fit:contain}
.lg-close{position:relative;display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--lg-muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lg-close::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--lg-fill-hover);transition:transform var(--lg-move) var(--lg-spring),background 160ms}
button.lg-close>svg{position:relative;width:20px;height:20px;pointer-events:none;transition:transform var(--lg-move) var(--lg-spring)}
.lg-close:enabled:active::before,.lg-close:enabled:active svg{transform:scale(.9)}
.lg-close:focus-visible{outline:none;box-shadow:none;background:var(--lg-fill-hover)}
.lg-close:disabled{opacity:.4;cursor:default}
@media(hover:hover) and (forced-colors:none){.lg-close:enabled:hover{color:var(--lg-text)}.lg-close:enabled:hover::before{background:color-mix(in srgb,var(--lg-muted) 24%,transparent)}}
@media(forced-colors:active){.lg-close::before{border:1px solid ButtonText;background:ButtonFace}.lg-close{color:ButtonText}.lg-close:focus-visible{outline:2px solid Highlight}}
#employee-close{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top))}
@media(prefers-reduced-motion:reduce){.portrait-frame,.lg-close::before,button.lg-close>svg{transition:none}}
