*{box-sizing:border-box}body{margin:0;background:#e9e6db;color:#193c3d;font-family:system-ui,sans-serif}header{padding:32px 4%;border-bottom:1px solid #b9c5bb;position:relative}h1{font-family:Georgia,serif;font-size:clamp(30px,4vw,54px);font-weight:400;margin:8px 0}header p{margin:0;color:#526766}.eyebrow{letter-spacing:3px;font-size:11px}header button{position:absolute;right:4%;top:40px}main{display:grid;grid-template-columns:260px minmax(320px,1fr) 240px;gap:22px;padding:24px}aside{min-width:0}h2{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin:22px 0 14px}label{display:block;font-size:12px;margin:10px 0;color:#476262}input,select,textarea{width:100%;margin-top:5px;border:1px solid #a0b2a8;padding:9px;background:#f7f5ed;color:#173a3b;font:inherit;border-radius:3px}input[type=checkbox]{width:auto}button{border:1px solid #65857d;padding:10px 12px;margin:4px 4px 4px 0;background:#f5f1e6;color:#244e4c;border-radius:3px;cursor:pointer}button:hover{background:#d3e3d8}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bc773c;outline-offset:2px}aside>button{width:100%;text-align:left}.hint{font-size:12px;line-height:1.6;color:#617772}.coords{display:flex;gap:8px}.coords label{width:33%}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:10px}.toolbar label{display:flex;align-items:center;gap:8px}.stage{height:480px;width:100%;background:#112b2d;border-radius:8px;overflow:hidden}.stage p{color:#fff;padding:20px}.stage canvas{display:block;width:100%;height:100%}.legend{display:flex;flex-wrap:wrap;gap:20px;font-size:10px;padding:14px 0;color:#59726c}.bones{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.bones article{background:#f6f3e9;border:1px solid #ced1c3;padding:14px;border-radius:5px}strong{font-size:12px}textarea{height:280px;font-family:monospace;font-size:11px}footer{position:sticky;bottom:0;background:#244e4c;color:#fff;padding:12px 24px;font-size:13px}@media(max-width:1100px){main{grid-template-columns:220px minmax(300px,1fr)}main>aside:last-child{grid-column:1/-1;display:block}}@media(max-width:650px){main{display:flex;flex-direction:column;padding:14px}header button{position:static}header{padding:22px}.stage{height:360px}.viewer{order:-1}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;animation:none!important;transition:none!important}}