*{box-sizing:border-box}body{margin:0;background:#f2f4ed;color:#20342b;font:15px/1.5 system-ui}header{padding:24px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d7dfd1}header span{font-size:11px;letter-spacing:2px;color:#567960}h1{font-size:24px;margin:5px 0}header p{margin:0;color:#657168}a{color:#3b664a}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;height:calc(100vh - 139px);min-height:450px}#viewport{min-width:0;position:relative}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}aside{padding:24px;border-left:1px solid #d7dfd1;background:#fafbf6}nav{display:flex;gap:8px;flex-wrap:wrap}button{border:1px solid #a5bba3;background:#eaf1e2;color:#294731;border-radius:6px;padding:9px 12px;cursor:pointer}button:hover{background:#dce9cf}button:focus-visible,a:focus-visible{outline:3px solid #65865e;outline-offset:3px}#status{font-size:13px;color:#45624e}.notice{font-size:12px;padding:12px;background:#f5edcf;border-radius:7px}small{font-size:11px;color:#74816f}@media(max-width:760px){header{padding:16px;display:block}h1{font-size:19px}main{display:flex;flex-direction:column;height:auto}#viewport{height:65vh}aside{border-left:0;border-top:1px solid #d7dfd1;padding:18px}}

.style-picker{display:flex;gap:6px;margin:20px 0 8px;padding:4px;border:1px solid #c7d1bd;border-radius:10px;background:#f2f4ed}.style-picker button{flex:1;background:transparent;border-color:transparent}.style-picker button[aria-pressed="true"]{background:#355440;color:#fff}button:disabled{opacity:.55;cursor:wait}#style-description{font-size:12px;color:#657168;margin:0 0 20px}body[data-style="village"]{background:#efece2}body[data-style="village"] aside{background:#f8f4e9}

.motion{margin-bottom:16px;width:100%}button[hidden]{display:none}body[data-style="village"] .notice{background:#f1dfb6}