.beast-demo{color:var(--ink,#263c33)}
.beast-demo .section-head>p:last-child{font:14px/1.8 var(--cn);color:var(--muted,#69766c);margin-top:20px}
.demo-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;margin-top:32px}
.demo-console{padding:28px;border:1px solid #91a08a;background:#f8f4e9;box-shadow:8px 10px 0 #476d5810}
.beast-demo button,.beast-demo select{font:14px/1.6 var(--cn);padding:10px 14px;min-height:44px;cursor:pointer;border:1px solid #84987f;border-radius:4px;background:#f8f4e9;color:#365040}
.beast-demo button:focus-visible,.beast-demo input:focus-visible,.beast-demo select:focus-visible{outline:3px solid #b87c35;outline-offset:3px}
.demo-picker{display:flex;gap:8px;flex-wrap:wrap}
.demo-picker button[aria-pressed=true]{background:#476d58;color:#fff}
.demo-object{display:flex;align-items:center;gap:24px;margin:30px 0}
.beast-seal{display:grid;place-items:center;width:100px;height:100px;border:2px solid #476d5877;border-radius:50% 44% 48% 42%;color:var(--beast-tone,#476d58);background:#476d5812;font:500 54px/1 Georgia,serif;box-shadow:inset 0 0 0 6px #fff8e9}
.demo-object h3{font:600 28px/1.3 var(--cn);margin:6px 0}
.demo-object small,.demo-object p{font:14px/1.6 var(--cn);margin:0}
.demo-compare{display:flex;align-items:center;gap:10px;min-height:44px;font:14px/1.6 var(--cn)}
.demo-compare input{width:18px;height:18px;accent-color:#476d58}
.demo-stats{border-collapse:collapse;width:100%;font:15px/1.8 var(--cn);margin:8px 0 22px;text-align:left}
.demo-stats th,.demo-stats td{padding:12px 8px;border-bottom:1px solid #8da08545}
.demo-stats th{font-size:13px;font-weight:500}
.demo-stats td:last-child{color:#386345;font-weight:600}
.demo-materials{display:flex;justify-content:space-between;gap:12px;font:14px/1.7 var(--cn)}
.demo-condition{min-height:48px;margin:12px 0;font:14px/1.7 var(--cn);color:#685039}
.demo-actions{display:flex;flex-wrap:wrap;gap:10px}
.beast-demo [data-upgrade]{background:#476d58;color:#fff}
.beast-demo [data-upgrade][aria-disabled=true]{background:#e5dfd1;color:#695c48;border-color:#a5967d}
.demo-status{min-height:54px;font:14px/1.8 var(--cn);margin:18px 0 0;padding-top:14px;border-top:1px solid #8da08545}
.demo-explanation{padding:26px;background:#e7ecdf;border:1px solid #91a08a55}
.demo-explanation h3{font:600 22px/1.5 var(--cn);margin:0 0 18px}
.demo-explanation ol{padding-left:24px;margin:0}
.demo-explanation li{padding-left:6px;margin-bottom:20px;font:15px/1.7 var(--cn)}
.demo-explanation li p{font:14px/1.8 var(--cn);margin:6px 0;color:#5c6c5d}
.demo-scenario{display:grid;gap:8px;font:14px/1.7 var(--cn)}
.beast-demo .demo-reset{margin-top:14px}
.demo-boundary{font:13px/1.8 var(--cn);color:#657360;margin:20px 0 0}
.beast-demo [hidden]{display:none!important}
.beast-demo .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.demo-console,.demo-explanation{padding:22px}.demo-object{gap:18px}.beast-seal{width:80px;height:80px;font-size:42px}}