body{margin:0;padding:0;background-color:#fff8f2;background-image:radial-gradient(circle at 18% 14%,rgba(255,224,230,.52) 0%,rgba(255,224,230,0) 29%),radial-gradient(circle at 82% 12%,rgba(255,244,228,.78) 0%,rgba(255,244,228,0) 31%),radial-gradient(circle at 50% 40%,rgba(255,255,255,.88) 0%,rgba(255,250,244,.82) 34%,rgba(246,236,228,.74) 72%,rgba(238,227,219,.84) 100%),radial-gradient(circle at 50% 48%,rgba(255,255,255,0) 58%,rgba(104,74,67,.055) 100%),linear-gradient(180deg,#fffdfa 0%,#fff8f2 36%,#fbf1ea 68%,#f6ebe4 100%),repeating-linear-gradient(135deg,rgba(120,94,84,.016) 0,rgba(120,94,84,.016) 1px,rgba(255,255,255,0) 1px,rgba(255,255,255,0) 7px);font-size:14px;font-family:'Poppins','Nunito','Quicksand','Segoe UI',sans-serif;color:#231F20;overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:1100px;height:680px;margin-top:10px;}
#text{width:400px;height:425px;left:60px;top:80px;position:absolute;}
#code{display:none;font-family:'Lora','Cormorant Garamond',serif;font-size:19px;line-height:1.9;letter-spacing:0.35px;color:#333333;text-align:left;word-break:break-word;overflow-wrap:anywhere}
#clock-box {position:absolute;left:60px;top:550px;font-size:28px;display:none;}
#clock-box a {font-size:28px;text-decoration:none;}
#clock-box-inside-text{display:inline-block;}
#clock{margin-left:48px;}
#clock .digit {font-size:64px;}
#canvas-box{width:1100px;height:680px;margin:0 auto;}
#canvas{display:block;margin:0 auto;width:1100px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:60px;display:none;}
.hand{cursor:pointer;}
.say{display:block;margin:0 0 18px;}
.say:last-child{margin-bottom:0;}
.space{margin-right:150px;}

@media screen and (max-width: 768px) {
body{
    min-width:320px;
}

#main{
    overflow-x:hidden;
}

#wrap{
    width:100%;
    max-width:100%;
    height:auto;
    margin-top:0;
    padding:24px 0 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    box-sizing:border-box;
    overflow:hidden;
}

#text{
    position:static;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
    order:1;
}

#code{
    width:100%;
    font-size:17px;
    line-height:1.9;
    letter-spacing:0.35px;
}

.say{
    margin:0 0 18px;
}

.space{
    margin-right:0;
}

#canvas-box{
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    order:2;
}

#canvas{
    display:block;
    width:150vw;
    max-width:none;
    height:auto;
    aspect-ratio:1100 / 680;
    margin:0;
    transform:translateX(-21vw);
    transform-origin:top center;
}

#clock-box{
    position:static;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 20px 8px;
    box-sizing:border-box;
    font-size:18px;
    text-align:center;
    line-height:1.5;
    order:3;
}

#clock-box-inside-text{
    display:block;
    margin-bottom:8px;
}

#clock-box a{
    font-size:inherit;
}

#clock{
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-end;
    gap:4px 8px;
    line-height:1.4;
}

#clock .digit{
    font-size:42px;
    line-height:1;
    display:inline-block;
}

#error{
    width:90%;
    margin-top:24px;
}
}

@media screen and (max-width: 320px) {
#wrap{padding:18px 0 24px;gap:14px;}
#text{padding:0 20px;}
#code{font-size:16px;line-height:1.85;letter-spacing:0.3px;}
#canvas{width:164vw;transform:translateX(-28vw);}
#clock-box{font-size:14px;}
#clock{gap:4px 6px;}
#clock .digit{font-size:30px;}
}

@media screen and (min-width: 321px) and (max-width: 360px) {
#code{font-size:16px;line-height:1.85;letter-spacing:0.32px;}
#canvas{width:156vw;transform:translateX(-24vw);}
#clock-box{font-size:15px;}
#clock .digit{font-size:32px;}
}

@media screen and (min-width: 361px) and (max-width: 390px) {
#code{font-size:17px;line-height:1.9;letter-spacing:0.35px;}
#canvas{width:150vw;transform:translateX(-21vw);}
#clock-box{font-size:16px;}
#clock .digit{font-size:34px;}
}

@media screen and (min-width: 391px) and (max-width: 412px) {
#code{font-size:17px;line-height:1.9;letter-spacing:0.35px;}
#canvas{width:146vw;transform:translateX(-19vw);}
#clock-box{font-size:16px;}
#clock .digit{font-size:36px;}
}

@media screen and (min-width: 413px) and (max-width: 414px) {
#code{font-size:17px;line-height:1.9;letter-spacing:0.35px;}
#canvas{width:145vw;transform:translateX(-18vw);}
#clock-box{font-size:16px;}
#clock .digit{font-size:36px;}
}

@media screen and (min-width: 415px) and (max-width: 480px) {
#code{font-size:18px;line-height:1.95;letter-spacing:0.4px;}
#canvas{width:138vw;transform:translateX(-15vw);}
#clock-box{font-size:17px;}
#clock .digit{font-size:38px;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
#wrap{padding:28px 0 32px;gap:24px;}
#text{padding:0 24px;}
#code{font-size:18px;line-height:1.95;letter-spacing:0.4px;}
#canvas{width:118vw;transform:translateX(-7vw);}
#clock-box{font-size:20px;}
#clock .digit{font-size:46px;}
}