*{box-sizing:border-box}body{margin:0;color:#234c3d;font-family:Microsoft YaHei,system-ui,sans-serif;overflow:hidden;background:#e6e9d7}#viewer{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;top:0;left:0;right:0;padding:25px 35px;display:flex;justify-content:space-between;font-size:14px;gap:20px;pointer-events:none}header a{color:#254e3d;text-decoration:none;font-weight:700;pointer-events:auto}header span{letter-spacing:2px}aside{position:absolute;top:50%;left:5vw;transform:translateY(-50%);max-width:290px;pointer-events:none}h1{font-size:38px;margin:15px 0;letter-spacing:3px}.eyebrow{font-size:10px;letter-spacing:2px;line-height:1.8;color:#819069}#description{font-size:14px;line-height:1.9;color:#58705a}#creature-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}button{font:inherit;cursor:pointer;border:1px solid #99ac8870;border-radius:22px;color:#355940;background:#f7f7e8db;padding:11px 16px;pointer-events:auto;min-height:42px}button:hover{background:#fff9db}button.active{background:#2d6148;color:#fff2c1;border-color:#2d6148}button:focus-visible,a:focus-visible{outline:3px solid #cfa34b;outline-offset:3px}.actions{position:absolute;bottom:25px;left:50%;transform:translate(-50%);text-align:center;width:max-content;max-width:95vw}#animation-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.actions p{font-size:12px;color:#637b5e;margin-top:15px}#notice{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);background:#f9f5dfec;padding:18px 26px;border-radius:25px;box-shadow:0 12px 40px #37583825;font-size:14px}.hidden{display:none!important}@media(max-width:750px){header{padding:20px;font-size:12px}header span{letter-spacing:0}aside{top:78px;left:25px;transform:none;max-width:90vw}h1{font-size:28px;margin:8px 0}#description{font-size:12px;max-width:310px;margin:6px 0}.eyebrow{display:none}#creature-tabs{margin-top:12px;gap:5px}#creature-tabs button{font-size:12px;padding:8px 10px;min-height:35px}.actions{bottom:20px}.actions button{font-size:12px;padding:9px 13px}#animation-tabs{gap:5px}}@media(max-height:570px)and (orientation:landscape){aside{top:60px;max-width:230px}h1{font-size:26px}#description{font-size:12px}.actions{left:66%;bottom:10px}.actions p{margin:7px 0}#creature-tabs button{font-size:12px;padding:8px 11px}}
