main {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    width: 100vw;
    height: 100vh;
}

#show {
    box-sizing: border-box; 
    /* CSS 的 width 指的是 内容区 (content box) 的宽度, 所以要特意指定包含边框!, 这样才能正确! */
    width: 20vw;
}

#other {
    box-sizing: border-box;
    width: 20vw;
}

/* 外层自适应容器 */
#timer {
    width: 20vw;
    height: 16vw;
}

.time {
    /* 置中四件套, 绝对布局, 元素左上角定位中心, 元素移动自身到置中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


    font-size: 80px;
    color: #3B82F6;

    display: flex;
    justify-content: center;
    align-items: center;
}



/* 舞台 - 固定设计稿尺寸 */
#stage {
    width: 512px;
    /* 两只猫叠加区域的总宽度 */
    height: 256px;
    /* 舞台高度 */
    position: absolute;
    top: 55%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(1);
    overflow: hidden;
    /* 超出部分直接隐藏 */
    margin-top: auto;
}

.cat {
    position: absolute;
    width: 256px;
    height: 256px;
}

.cat img {
    position: absolute;
}

/* ===== 黄色猫 ===== */
#yellow-cat .cat-body {
    top: 33px;
    left: 20px;
    width: 256px;
}

#yellow-cat .cat-closemouth {
    top: 120px;
    left: 65px;
    width: 150px;
    opacity: 0;
}

#yellow-cat .cat-openmouth {
    top: 130px;
    left: 100px;
    width: 110px;
}

#yellow-cat .cat-hand {
    top: 160px;
    left: 80px;
    width: 160px;
}

#yellow-cat .cat-rope {
    top: -225px;
    left: 145px;
    width: 20px;
    opacity: 0;
}

#yellow-cat .cat-fish {
    top: 155px;
    left: 115px;
    width: 80px;
    opacity: 0;
}

/* ===== 黑色猫 ===== */
#black-cat {
    left: 256px;
    top: 0;
}

#black-cat .cat-body {
    top: 20px;
    left: -20px;
    width: 256px;
}

#black-cat .cat-closemouth {
    top: 120px;
    left: 60px;
    width: 120px;
    opacity: 0;
}

#black-cat .cat-openmouth {
    top: 130px;
    left: 60px;
    width: 110px;
}

#black-cat .cat-rope {
    top: -232px;
    left: 113px;
    width: 12px;
    opacity: 1;
}

#black-cat .cat-fish {
    top: 155px;
    left: 70px;
    width: 80px;
    opacity: 0;
}

/* 增加填充 */
/* 有bug, 无法使用sketchy填充, 填充的区域会比background-color小一圈 */
.sketchy-box-timer {
    --rough-stroke-width: 1.5px;
    --rough-roughness: 3;
    --rough-fill: #FF8040;
    --rough-stroke: #FF8040;
    background-image: paint(roughBox);
    /* background-color: blueviolet; */
}


/* CSS */
.button-55 {
    align-self: center;
    background-color: #E9E9E9;
    background-image: none;
    background-position: 0 90%;
    background-repeat: repeat no-repeat;
    background-size: 4px 3px;
    border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
    border-style: solid;
    border-width: 2px;
    box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
    box-sizing: border-box;
    color: #41403e;
    cursor: pointer;
    display: inline-block;
    font-family: 'PixelFont';
    font-size: 1rem;
    line-height: 23px;
    outline: none;
    padding: .75rem;
    text-decoration: none;
    transition: all 235ms ease-in-out;
    border-color: #3B82F6;
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-55:hover {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
    transform: translate3d(0, 2px, 0);
}

.button-55:focus {
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}