*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:flex;justify-content:center;align-items:center;perspective:1000px;background-image:url(/explorations/cassette-micro-mages/img/bg.webp);background-size:cover}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000059}.box{--depth: 9vmin;position:relative;transform-style:preserve-3d}.box__side{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--grey-0)}.box__side--left,.box__side--right{width:var(--depth);transform-origin:0 0;background-color:var(--grey-1)}.box__side--left{transform:rotateY(90deg)}.box__side--right{left:100%;transform:rotateY(-90deg) translate(-100%)}.box__side--back{transform:rotateY(180deg) translateZ(var(--depth))}.box__side--top{transform-origin:0 100%;top:auto;height:var(--depth);bottom:100%;background-color:var(--grey-2);transform:rotateX(90deg)}.box__side--bottom{background-color:var(--grey-2);transform-origin:0 0;top:100%;height:var(--depth);transform:rotateX(-90deg)}.cartridge{--grey-0: #9c9c9c;--grey-1: #8c8c8c;--grey-2: #b0b0b0;--grey-3: #8c8c8c;position:relative;transform:rotateY(0);transform-style:preserve-3d;z-index:1}.cartridge__picture{position:absolute;top:0;left:1.5vmin;width:75%;height:80%;border-radius:0 0 .75vmin .75vmin;background-color:#080808;background-image:url(/explorations/cassette-micro-mages/img/micro-mage.webp);background-size:contain;background-repeat:no-repeat;background-position:center center;box-shadow:inset 0 -1vmin 2vmin #0000000d}.cartridge__triangle{position:absolute;bottom:0;left:3vmin;width:0;height:0;border-left:2vmin solid transparent;border-right:2vmin solid transparent;border-top:3.75vmin solid rgba(0,0,0,.05)}.cartridge .stripes{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(180deg,transparent 1vmin,rgba(0,0,0,.075) 1vmin,rgba(0,0,0,.075) 2vmin,var(--grey-1) 2vmin);background-size:100% 2vmin}.touch-device .cartridge{animation:cartridge 75s linear infinite}.body,.bottom{position:relative}.body{display:flex;align-items:flex-end;position:relative;width:60vmin;aspect-ratio:1/1}.body__left{position:relative;width:15%;height:100%}.body__middle{display:block;position:relative;width:26%;height:100%;overflow:visible;transform-style:preserve-3d}.body__middle__top{--depth: 3vmin;position:relative;width:100%;height:18%;transform:translateZ(-3vmin)}.body__middle__top .box__side--front,.body__middle__top .box__side--back{box-shadow:inset 0 -6vmin 4.5vmin #00000026}.body__middle__bottom{position:relative;width:100%;height:82%}.body__right{position:relative;width:59%;height:100%}.body__right .box__side--top:before{content:"";position:absolute;bottom:0;left:1.5vmin;width:75%;height:50%;background-color:#080808}.bottom{top:-1px;left:50%;width:51vmin;aspect-ratio:5/1;transform:translate(-50%)}.bottom .stripes__wrapper{top:0;left:8.9%;position:absolute;width:30.5%;height:100%}.bottom .stripes__wrapper .stripes{background-position:0 -1.13vmin}.bottom .stripes__wrapper .stripes:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:7.5vmin;border-radius:.75vmin .75vmin 0 0;background-color:var(--grey-0);box-shadow:inset -.37vmin 0 1.5vmin #0000001a}.bottom .box__side--bottom{background-color:#000;box-shadow:inset 0 -.75vmin 4.5vmin #ffffff4d;border:solid 2.25vmin var(--grey-2)}.bottom .box__side--bottom:before{content:"";position:absolute;top:50%;left:7%;width:86%;height:12%;background-color:#fff;transform:translateY(-50%)}.hole{position:absolute;width:2.25vmin;height:2.25vmin;background-image:radial-gradient(#000,#00000080);border-radius:50%;transform:rotateX(180deg) translateZ(9vmin);opacity:.7}.hole--1{left:1.5vmin;bottom:1.5vmin}.hole--2{right:1.5vmin;bottom:1.5vmin}.hole--3{left:50%;bottom:24vmin;transform:translate(-50%) rotateX(180deg) translateZ(9vmin)}.back-large{position:absolute;bottom:4.5vmin;left:50%;width:74%;height:30%;background-color:#0000001a;transform:translate(-50%) rotateX(180deg) translateZ(9vmin);box-shadow:inset 0 .75vmin .75vmin #ffffff26,inset 0 -.75vmin .75vmin #00000026}.back-small{position:absolute;bottom:3vmin;left:50%;width:50%;height:70%;background-color:#0000001a;transform:translate(-50%) rotateX(180deg) translateZ(9vmin);box-shadow:inset 0 .75vmin .75vmin #ffffff26,inset 0 -.75vmin .75vmin #00000026}@keyframes cartridge{0%{transform:rotateY(0) rotateX(0) rotate(0)}to{transform:rotateY(720deg) rotateX(-720deg) rotate(-3600deg)}}