:root {color-scheme:light;--paper:#f4eee1;--ink:#283b3a;--line:#d4cbb9;--clay:#b85948}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f8f2e5 0,var(--paper) 260px);color:var(--ink);font:16px/1.5 system-ui,sans-serif}
header,main,footer{max-width:1080px;margin:auto;padding:20px}header{padding-top:32px}h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(2.2rem,7vw,3.8rem);line-height:1.05;margin:8px 0 12px}h2{font:normal 1.5rem Georgia,serif}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:#78503e}header p{margin:8px 0}main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:28px;align-items:start}
#tray{width:100%;height:auto;display:block;touch-action:none;background:var(--paper);border:12px solid #b9a481;border-radius:8px;box-shadow:0 10px 26px #293b3a22,0 0 0 2px #8a7355;cursor:crosshair}
button,input,select{font:inherit}button,.file-label{border:1px solid var(--line);background:#fffaf0;color:var(--ink);border-radius:7px;min-height:44px;padding:9px 12px;cursor:pointer;touch-action:manipulation}button:hover{border-color:#78503e}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{background:var(--ink);color:white}button:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #397ea0;outline-offset:3px}
body.simple #adjust{display:none}
fieldset{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fffaf0}legend{padding:0 6px}legend,summary{font-weight:650;margin-bottom:10px}.tools,.actions{display:flex;flex-wrap:wrap;gap:8px}.tools{background:#e7dcc4;border-radius:10px;padding:4px}.tools button{flex:1;border-color:transparent;background:transparent}.palette{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.palette button{width:48px;height:48px;padding:0;border-radius:50%;border:2px solid #fffaf0;box-shadow:0 0 0 1px var(--line)}.palette button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px}
label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0}input[type=range]{width:52%;min-height:44px}input[type=color]{width:70px;height:44px;padding:2px;background:transparent;border:1px solid var(--line)}.file-label{display:block}.file-label input{display:block;max-width:100%;font-size:.8rem;margin-top:6px}details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer;min-height:30px}.small,.caption{font-size:.78rem;color:#625e55}.caption{margin-top:6px}.try{font-size:.85rem;background:#fffaf0;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin:8px 0 0}#status{min-height:1.5em;margin-bottom:2px;font-size:.9rem}.check{justify-content:flex-start}.check input{width:22px;height:22px}
html{-webkit-text-size-adjust:100%}
#swatch{max-width:100%;height:auto;cursor:crosshair;border-radius:6px;margin-top:10px;touch-action:manipulation}.paint-notes{margin:8px 0 10px;padding:8px 10px;background:#fbf3e4;border-radius:6px;border:1px solid var(--line)}.note-row{margin:6px 0;font-size:.82rem}.note-row input{flex:1;min-height:36px;padding:4px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:.82rem;max-width:65%}.custom-tines-wrap{margin-top:4px;padding-left:8px;font-size:.85rem}.snapshot-row{display:flex;gap:8px;margin-bottom:10px}.snapshot-row input{flex:1;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:#fffaf0;font-size:.85rem}.snapshot-row button{white-space:nowrap}.gallery-section{grid-column:1/-1}#gallery{display:flex;flex-wrap:wrap;gap:16px}#gallery figure{margin:0;max-width:170px;background:#fffaf0;border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:4px}#gallery img{width:100%;border-radius:5px;aspect-ratio:384/480;object-fit:cover}.gallery-title{font-weight:600;font-size:.82rem;margin:2px 0 0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.gallery-meta{font-size:.72rem;color:#786f62;margin-bottom:2px}.gallery-actions{display:flex;gap:6px}.gallery-actions button{flex:1;font-size:.78rem;min-height:34px;padding:4px 6px;margin:0}footer{font-size:.8rem;border-top:1px solid var(--line)}a{color:#6d4634}
@media(max-width:700px){main{grid-template-columns:1fr;padding:12px;gap:16px}header{padding:22px 16px 10px}.table{max-width:520px;width:100%;margin:auto}#tray{border-width:8px}aside{padding:4px}.gallery-section{grid-column:1}.tools{position:relative}header p:not(.eyebrow){font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}