:root{color-scheme:light;font-family:Tahoma,Arial,sans-serif;color:#111;background:#c0c0c0;font-size:13px}*{box-sizing:border-box}body{margin:0;padding:8px}main{max-width:750px;margin:auto;background:#c0c0c0;border:2px outset #eee;padding:3px}header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:7px 10px;color:#fff;background:linear-gradient(90deg,#000080,#1084d0)}header strong{font-size:21px}header span{font-size:12px}.intro{padding:10px 7px;line-height:1.4}.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:5px 4px 8px}button,select{font:inherit;min-height:32px;color:#111}button{background:#c0c0c0;border:2px outset #eee;padding:4px 9px;cursor:pointer}button:active{border-style:inset}button:disabled{color:#777;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid #000080;outline-offset:2px}select{background:#fff;border:2px inset #eee;padding:3px}#creature{flex:1;min-width:130px;max-width:340px}.stage{position:relative;background:#fff;border:2px inset #eee}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}#loading{position:absolute;top:38%;left:10%;width:80%;text-align:center;background:#fff;padding:8px;line-height:1.5}.controls{padding-top:8px}#caption{margin:4px 7px;font-weight:bold}.hint{margin:6px 7px;font-size:12px;line-height:1.4}footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px inset #eee;padding:5px;margin-top:8px;font-size:11px}a{color:#000080}.notes{padding:14px;line-height:1.6;background:#fff}.notes h1{font-size:22px}.notes h2{font-size:16px}.notes li{margin-bottom:6px}@media(max-width:440px){body{padding:3px}.intro{font-size:12px;padding:7px 4px}.toolbar{gap:4px}button{padding:4px 6px}header{gap:6px}header strong{font-size:18px}.hint{font-size:11px}}

body.compact{padding:3px;height:100vh;overflow:hidden}.compact main{height:100%;display:flex;flex-direction:column;max-width:none}.compact header{padding:3px 6px;flex:none}.compact header strong{font-size:14px}.compact header span{font-size:10px}.compact .intro,.compact .hint,.compact footer{display:none}.compact .toolbar{padding:3px;gap:4px;flex:none}.compact button,.compact select{font-size:11px;min-height:25px;padding:2px 5px}.compact .stage{flex:1;min-height:70px;display:flex;justify-content:center;overflow:hidden}.compact canvas{height:100%;width:auto;max-width:100%}.compact #caption{font-size:10px;margin:2px 4px;flex:none}