*{box-sizing:border-box;margin:0;padding:0}html,body{color:#f4ecd8;background:#1b1b2f;min-height:100vh;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,PingFang SC,Microsoft YaHei,monospace}body{flex-direction:column;align-items:center;gap:14px;padding:20px 8px 40px;display:flex}h1{letter-spacing:2px;text-shadow:2px 2px #000;text-align:center;font-size:18px}h1 small{color:#9aa3c7;letter-spacing:1px;text-shadow:none;margin-top:4px;font-size:12px;display:block}#stage{border:4px solid #000;position:relative;box-shadow:0 0 0 4px #5a4a78,0 0 0 8px #000,8px 12px 0 8px #00000059}canvas{image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;display:block}#dlg{color:#2b2140;white-space:pre-line;cursor:pointer;overscroll-behavior:contain;overflow-wrap:anywhere;background:#fdf6e3;border:4px solid #2b2140;max-height:calc(100% - 16px);padding:12px 14px 14px;font-size:14px;line-height:1.7;display:none;position:absolute;bottom:8px;left:8px;right:8px;overflow-y:auto;box-shadow:inset -4px -4px #d8c9a3,inset 4px 4px #fff,4px 4px #0006}#dlg.top{top:8px;bottom:auto}#dlg img{max-width:min(100%,260px);max-height:min(45vh,max(48px,calc(var(--scene-height) - 152px)));image-rendering:pixelated;border:3px solid #2b2140;margin:6px auto 0;display:block}#dlg b{color:#fdf6e3;background:#2b2140;margin-bottom:4px;padding:0 6px;display:inline-block}.art-row{justify-content:center;align-items:center;gap:10px;max-width:380px;margin:6px auto 0;display:flex}.art-row img{max-width:min(100% - 108px,260px)!important;margin:0!important}.art-arrow{color:#2b2140;cursor:pointer;touch-action:manipulation;background:#fdf6e3;border:2px solid #2b2140;flex:0 0 44px;width:44px;height:44px;padding:0;font:16px monospace;box-shadow:2px 2px #d8c9a3}.art-arrow:hover{background:#eee1be}.art-arrow:active{box-shadow:none;transform:translate(1px,1px)}.art-arrow:focus-visible{outline-offset:2px;outline:2px solid #75549a}#dlg:after{content:"▼";font-size:10px;animation:1s steps(2,end) infinite bl;position:absolute;bottom:4px;right:10px}@keyframes bl{50%{opacity:0}}.hint{color:#9aa3c7;text-align:center;font-size:12px;line-height:1.8}@media (max-width:500px){body{padding:16px 4px 32px}#stage{border-width:2px;box-shadow:0 0 0 2px #5a4a78,0 0 0 4px #000}}footer{color:#5d6488;text-align:center;margin-top:14px;font-size:11px;line-height:1.6}#guestbook{color:#2b2140;background:#fdf6e3;border:4px solid #2b2140;width:min(720px,100vw - 24px);height:min(760px,100dvh - 40px);max-height:calc(100dvh - 40px);margin:auto;padding:0;overflow:hidden;box-shadow:6px 6px #0006}#guestbook[open]{flex-direction:column;display:flex}#guestbook::backdrop{background:#171627bd}.guestbook-bar{color:#fdf6e3;background:#2b2140;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.guestbook-bar button{font:inherit;color:#2b2140;cursor:pointer;background:#fdf6e3;border:2px solid #c7b699;min-height:40px;padding:7px 10px}#guestbook iframe{background:#fdf6e3;border:0;flex:1;width:100%;min-height:0;display:block}#guestbook>a{color:#6e527e;text-align:center;padding:6px 12px;font-size:12px}#guestbook button:focus-visible,#guestbook>a:focus-visible{outline-offset:2px;outline:3px solid #c48b60}.guestbook-content{overscroll-behavior:contain;flex:1;padding:16px;font-size:14px;line-height:1.7;overflow:auto}.guestbook-content p{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.guestbook-actions{flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0;display:flex}.guestbook-content button,.guestbook-actions>a{font:inherit;color:#2b2140;cursor:pointer;background:#eee1be;border:2px solid #2b2140;min-height:40px;padding:6px 10px;text-decoration:none}.guestbook-content button:disabled{opacity:.5;cursor:wait}.guestbook-comments article{background:#fffaf0;border:2px solid #c4b293;margin:12px 0;padding:12px}.guestbook-comment-heading{flex-wrap:wrap;justify-content:space-between;gap:4px 12px;display:flex}.guestbook-comment-heading time{color:#716281;font-size:12px}.guestbook-comments a{color:#805b83;font-size:12px}.guestbook-content details{border-top:1px solid #c4b293;margin-top:18px;padding-top:12px}.guestbook-content summary{cursor:pointer;font-weight:700}.guestbook-history{font-size:13px}.guestbook-content [role=status]{color:#80533c;min-height:24px}.guestbook-form{margin:16px 0}.guestbook-form label{margin:10px 0 4px;font-weight:700;display:block}.guestbook-form input,.guestbook-form textarea{width:100%;font:inherit;color:#2b2140;background:#fffdf5;border:2px solid #84728d;border-radius:0;padding:9px;display:block}.guestbook-form textarea{resize:vertical;min-height:90px}.guestbook-content small{color:#716281;font-size:12px}.guestbook-content .guestbook-actions{justify-content:space-between}.guestbook-form .guestbook-actions{flex-wrap:nowrap}.guestbook-form .guestbook-actions button{flex-shrink:0}.gb-trap{position:absolute;left:-9999px}.guestbook-replying:not([hidden]){background:#e9deca;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:6px;display:flex}.guestbook-thread{background:#fffaf0;border:2px solid #c4b293;margin:12px 0;padding:12px}.guestbook-thread article{border:0;margin:0;padding:0}.guestbook-thread .guestbook-reply{border-left:3px solid #aa8d69;margin:10px 0 0 12px;padding:8px 0 0 12px}.guestbook-content .guestbook-reply-button{box-shadow:none;color:#805b83;background:0 0;border:0;padding:0;font-size:12px}.guestbook-content [hidden]{display:none!important}.guestbook-content input:focus-visible,.guestbook-content textarea:focus-visible{outline-offset:2px;outline:3px solid #ad705b}
