:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#1c1a16;--bg:#f5f1ea;--panel:#fff;--text:#1c1a16;--muted:#6f655b;--border:#1c1a1629;--accent:#c36a3d;--accent-soft:#c36a3d29;background-color:#f5f1ea;font-family:Space Grotesk,Segoe UI,sans-serif}*{box-sizing:border-box}body,#app{min-height:100vh;margin:0}body{color:var(--text);background:radial-gradient(circle at 15% 15%,#ffeddb99,#0000 40%),linear-gradient(140deg,#f9f4ee 0%,#f2ece4 65%)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app{gap:1.25rem;max-width:1000px;margin:0 auto;padding:1.5rem;display:grid}.app__header h1{letter-spacing:-.02em;margin:0;font-size:clamp(1.9rem,4vw,2.6rem)}.app__main{gap:1.25rem;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:.9rem;padding:1rem;animation:.35s both fade}.app__controls{gap:1rem;display:grid}.pigment-controls{gap:.9rem;display:grid}.control-label{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0;font-size:.72rem}.swatch-row{flex-wrap:wrap;gap:.5rem;display:flex}.swatch-button{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:.55rem;padding:.25rem;transition:border-color .2s,box-shadow .2s}.swatch-button.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.swatch{border:1px solid var(--border);background:#f2f1ec;border-radius:.45rem;width:28px;height:28px;display:block}.custom-row{gap:.6rem;display:grid}.custom-row .react-colorful{width:100%;height:150px}.custom-row .react-colorful__saturation{border:1px solid var(--border);border-radius:.8rem .8rem 0 0}.custom-row .react-colorful__hue{border:1px solid var(--border);border-radius:999px}.custom-row .react-colorful__last-control{border-radius:0 0 .8rem .8rem}.custom-inputs{align-items:center;gap:.5rem;display:flex}.custom-input{border:1px solid var(--border);font-variant-numeric:tabular-nums;color:var(--text);background:#fff;border-radius:.6rem;flex:1;padding:.5rem .6rem;font-size:.9rem}.custom-preview{border:1px solid var(--border);background:#f2f1ec;border-radius:.5rem;width:44px;height:36px}.custom-preview.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.canvas-panel{gap:.75rem;display:grid}.canvas-toolbar{color:var(--muted);justify-content:space-between;align-items:center;gap:.75rem;font-size:.85rem;display:flex}.canvas-status{min-height:1rem}.simulation-canvas{border:1px solid var(--border);cursor:crosshair;touch-action:none;background:#141211;border-radius:.9rem;width:100%;height:min(60vh,520px)}.ghost-button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:0 0;border-radius:999px;padding:.35rem .9rem;font-size:.85rem}.ghost-button:hover{border-color:#1c1a164d}.canvas-fallback{color:var(--muted);font-size:.9rem}.canvas-fallback__details{color:#b9483a;margin-top:.5rem}.app__footer{border-top:1px solid var(--border);color:var(--muted);padding-top:1rem;font-size:.8rem}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (min-width:900px){.app__main{grid-template-columns:minmax(240px,320px) minmax(0,1fr);align-items:start}}@media (max-width:600px){.simulation-canvas{height:50vh}}