:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#3c392c;background:#f3e9d3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 32px,540px);margin:auto;padding:22px 0 max(24px,env(safe-area-inset-bottom))}button,summary{font:inherit;touch-action:manipulation}button{cursor:pointer;min-width:44px;min-height:44px;border:1.5px solid #9d8d70;background:#fcf7e8;color:#3c392c;border-radius:6px;padding:8px 13px}button:hover:not(:disabled){background:#fffdf6}button:focus-visible,summary:focus-visible{outline:3px solid #244f66;outline-offset:3px}button:disabled{cursor:default;opacity:.65}header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}h1{font-size:clamp(24px,6vw,33px);letter-spacing:-.06em;line-height:1.1;margin:0;color:#4a5835;font-weight:900}h1 span{color:#a24732}#sound{font-size:13px;flex-shrink:0;border:0;background:none}nav{display:flex;gap:5px;border-bottom:1px solid #b8a98a;padding-bottom:9px}nav button{flex:1;border:0;background:none;border-radius:0;font-size:14px;padding:7px 4px}nav button[aria-current="step"]{background:#4a5835;color:#fffbea;border-radius:5px}nav small{display:block;font-size:11px;margin-top:3px}.scoreline{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:14px;margin:13px 0 7px}.scoreline>span:first-child{font-size:12px}.scoreline b{font-size:20px}#clock{font-variant-numeric:tabular-nums}.scene{position:relative;aspect-ratio:6/7;background:#e8ead7;overflow:hidden;border-radius:48% 48% 8px 8px / 9% 9% 8px 8px}canvas{width:100%;height:100%;display:block}#bugs{position:absolute;inset:0}.bug{position:absolute;transform:translate(-50%,-50%);width:70px;height:70px;background:none;border:0;padding:0;border-radius:50%;color:#3d362b}.bug:hover:not(:disabled){background:#fff7c880}.bug svg{width:100%;height:56px;display:block}.bug .lifeline{height:3px;width:40px;background:#938b6e55;margin:0 auto}.bug .lifeline i{height:3px;display:block;background:#6c7052}.bug:disabled{opacity:1}#intro,#pause{position:absolute;inset:0;background:#f2ead5e8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#intro p{font-size:clamp(28px,7vw,40px);font-weight:900;line-height:1.5;color:#4a5835;margin:0 0 14px}#intro span{font-size:14px;line-height:1.8}#intro button{background:#4a5835;color:#fff9e8;margin-top:22px;min-width:160px;font-weight:700;border-color:#4a5835}#pause p{font-size:28px;font-weight:700}[hidden]{display:none!important}.below{display:flex;justify-content:center;gap:clamp(8px,4vw,27px);align-items:center;margin:8px 0 0}.below strong{display:block;font-size:clamp(13px,3.5vw,17px);white-space:nowrap;margin:4px 0}.below small{font-size:11px}.below>div{width:35%;text-align:center}.below>div>span{font-size:11px;display:block}#hourglass{border:0;background:transparent;display:flex;align-items:center;flex-direction:column;padding:0;min-width:64px;position:relative;font-size:13px;line-height:1}#hourglass svg{width:62px;height:84px}#hourglass>span{font-weight:bold;margin-top:3px}#glass-art{transform-origin:40px 54px}#hourglass.flipped #glass-art{animation:turn .3s ease-out}#notice{min-height:42px;text-align:center;font-size:13px;line-height:1.6;margin:12px 0 0}#result{border-block:2px solid #889270;text-align:center;padding:15px 0;margin:6px 0 18px}h2{font-size:24px;margin:0 0 8px;color:#4a5835}#result p{font-size:14px;line-height:1.8;margin:0 0 12px}#result>div{display:flex;justify-content:center;gap:10px}#next-stage{background:#4a5835;color:#fff9e8}footer{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}footer>button{font-size:12px;border:0;background:none}details{width:100%;font-size:12px;line-height:1.9;border-top:1px solid #c2b69b;margin-top:10px}summary{padding:12px 0;cursor:pointer;min-height:44px}details p{margin:0 0 10px}@keyframes turn{from{transform:rotate(-180deg)}to{transform:rotate(0)}}@media(min-width:700px){main{padding-top:28px}.scene{aspect-ratio:6/6.3}canvas{object-fit:fill}}@media(max-width:350px){main{width:calc(100% - 24px);padding-top:14px}.bug{width:58px;height:62px}.bug svg{height:48px}.scoreline{font-size:12px}.below{gap:7px}#hourglass svg{height:75px;width:56px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
#intro{background:none;justify-content:flex-start;padding-top:42px;pointer-events:none}#intro p{font-size:30px;line-height:1.35;margin-bottom:11px}#intro span{font-size:13px}#intro button{pointer-events:auto;margin-top:16px}#intro[hidden]{display:none!important}@media(max-width:350px){#intro{padding-top:17px}#intro p{font-size:25px}#intro span{font-size:12px}#intro button{margin-top:12px}}
@media(min-width:700px){main{width:clamp(300px,calc((100dvh - 360px)*6/7),440px);padding:10px 0 12px}header{margin-bottom:6px}h1{font-size:26px}.scoreline{margin:7px 0 5px}.scene{aspect-ratio:6/7}#intro{padding-top:20px}#intro p{font-size:25px}#intro span{font-size:12px}#intro button{margin-top:12px}.below{gap:8px;margin-top:6px}#hourglass svg{height:74px;width:55px}#notice{margin-top:6px;min-height:36px}.below strong{font-size:13px}}
.scene{width:min(100%,max(240px,calc((100dvh - 360px)*6/7)));margin-inline:auto}#intro{padding-top:12px}#intro span{font-size:12px;line-height:1.65}#examples{display:flex;justify-content:center;align-items:center;gap:12px;height:32px;margin-top:6px}#examples svg{width:44px;height:32px}#examples .lifeline{display:none}#intro button{margin-top:10px}
@media(max-width:699px){.scene{width:min(100%,max(240px,calc((100dvh - 400px)*6/7)))}#notice{min-height:26px;margin-top:8px}}@media(min-width:700px){.scene{width:100%}}