*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#17150f;color:#f2ede5}header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid #363028}h1{font-size:1.2rem;margin:0}h1 span{color:#f07818;font-weight:400}.badges{display:flex;gap:.5rem}.badge{font-size:.72rem;padding:.15rem .5rem;border-radius:999px;border:1px solid #4a4234;color:#8f867a}.badge.on{border-color:#8a5a20;color:#f0a45e}main{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 53px)}#controls{overflow-y:auto;padding:1rem;border-right:1px solid #363028}#controls section,#controls details{margin-bottom:1rem;border:1px solid #363028;border-radius:8px;padding:.75rem}#controls h2,#controls summary{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#a89f92;margin:0 0 .5rem;cursor:pointer}label{display:block;font-size:.8rem;margin:.5rem 0 .25rem;color:#cfc6b8}input[type=range]{width:100%}select,input[type=color],input[type=number]{width:100%;background:#241f17;color:inherit;border:1px solid #453c2f;border-radius:4px;padding:.3rem}button{margin-top:.5rem;width:100%;padding:.45rem;background:#3a2c17;color:#f6e7d4;border:1px solid #6a4a20;border-radius:6px;cursor:pointer}button:hover{background:#4a3820}#stage{display:flex;flex-direction:column;padding:1rem;overflow:auto}#meta{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;font-size:.8rem;color:#a89f92}#progress{width:200px}#preview{flex:1;display:grid;place-items:center;background:repeating-conic-gradient(#1b1812 0% 25%,#221e16 0% 50%) 0 0 / 24px 24px;border-radius:8px;min-height:0}#preview canvas{max-width:100%;max-height:100%}#history{max-height:200px;overflow:auto;font-size:.7rem;background:#100e0a;padding:.5rem;border-radius:6px;white-space:pre-wrap}.value{color:#f07818;font-variant-numeric:tabular-nums}