body{background:#f3efe3;font-family:Georgia,serif;color:#23363a;padding:24px}
.wrap{max-width:1320px;margin:auto}
h1{text-align:center}
.layout{display:grid;grid-template-columns:410px 1fr 350px;gap:24px;align-items:start}
.card,.canvas-card{background:#fbf7ec;border:1px solid #d8cfbe;padding:16px}
.canvas-card{background:#fff}
.schema{width:100%;max-width:390px;display:block;margin:auto;background:#fff;border:1px solid #d8cfbe}
.segment-buttons,.mode-buttons,.palette-buttons,.category-buttons,.action-buttons,.view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.view-buttons{grid-template-columns:1fr 1fr 1fr;margin-bottom:12px}
button{font-family:Georgia,serif}
button{border:1px solid #b8ad98;background:#f4efe2;padding:6px;cursor:pointer}
button.active{background:#d8cfbe;font-weight:bold}
canvas{width:100%;max-width:660px;display:block;margin:auto}
.active-title{font-weight:bold;margin-bottom:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-height:300px;overflow:auto}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid #766f63;cursor:pointer}
.swatch.active{outline:2px solid #23363a;outline-offset:2px}
.pigment-name{margin-top:12px;font-size:14px}
.small-note{font-size:13px;margin-top:10px;color:#5a625d}
textarea{width:100%;height:190px;margin-top:12px;font-family:monospace;font-size:12px;box-sizing:border-box}