.modal-overlay{z-index:100;background:#1b1d1f80;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-panel{background:var(--surface);color:var(--ink);border-radius:var(--radius);border:1px solid var(--line);outline:none;flex-direction:column;width:100%;max-width:34rem;max-height:min(85vh,42rem);display:flex;box-shadow:0 20px 60px #1b1d1f40}.modal-panel__header{border-bottom:1px solid var(--line);flex-shrink:0;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-panel__title{font-family:var(--font-display);margin:0;font-size:1.25rem;font-weight:600}.modal-panel__close{appearance:none;color:var(--graphite);cursor:pointer;border-radius:calc(var(--radius) - 6px);background:0 0;border:none;padding:.35rem;display:inline-flex}.modal-panel__close svg{width:1.15rem;height:1.15rem}.modal-panel__close:hover{color:var(--ink);background:var(--pine-soft)}.modal-panel__body{padding:1.5rem;overflow-y:auto}.cpg-root{grid-template-columns:1fr;grid-template-areas:"toolbar""palette""export";gap:1.5rem;width:100%;display:grid}.cpg-toolbar{flex-wrap:wrap;grid-area:toolbar;align-items:center;gap:1rem 1.5rem;display:flex}.cpg-toolbar__field{color:var(--ink);align-items:center;gap:.6rem;font-size:.85rem;font-weight:600;display:flex}.cpg-toolbar__field select{font-family:var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--radius) - 6px);cursor:pointer;padding:.45rem .7rem;font-size:.9rem}.cpg-toolbar__hint{color:var(--graphite);margin:0 auto 0 0;font-size:.85rem;display:none}.cpg-toolbar__hint kbd{font-family:var(--font-mono);background:var(--pine-soft);color:var(--pine);border-radius:5px;padding:.1rem .45rem;font-size:.78rem}.cpg-toolbar__generate{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--font-body);border-radius:calc(var(--radius) - 4px);cursor:pointer;padding:.6rem 1.2rem;font-size:.875rem;font-weight:600;transition:border-color .15s,background-color .15s}.cpg-toolbar__generate:hover{border-color:var(--pine);background:var(--pine-soft)}.cpg-toolbar__generate:disabled{opacity:.5;cursor:not-allowed}.cpg-export-trigger{appearance:none;background:var(--pine);color:var(--on-accent);font-family:var(--font-body);border-radius:calc(var(--radius) - 4px);cursor:pointer;border:none;grid-area:export;justify-self:center;padding:.6rem 1.2rem;font-size:.875rem;font-weight:600}.cpg-export-trigger:hover{background:#264c41}.cpg-export-trigger:disabled{opacity:.5;cursor:not-allowed}.cpg-palette{border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;grid-area:palette;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);display:flex}.cpg-swatch{flex-direction:row;flex:1 1 0;justify-content:space-between;align-items:center;gap:1rem;min-height:84px;padding:1rem 1.25rem;display:flex;position:relative}.cpg-swatch--placeholder{background:var(--line);opacity:.4;animation:1.4s ease-in-out infinite cpg-pulse}@keyframes cpg-pulse{0%,to{opacity:.3}50%{opacity:.55}}.cpg-swatch--dragging{z-index:5;box-shadow:0 12px 30px #1b1d1f40}.cpg-swatch__top{align-items:center;gap:.5rem;display:flex}.cpg-swatch__handle,.cpg-swatch__lock{appearance:none;color:inherit;cursor:pointer;opacity:.85;touch-action:none;background:0 0;border:1.5px solid;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:2.1rem;height:2.1rem;display:inline-flex}.cpg-swatch__handle:hover,.cpg-swatch__lock:hover{opacity:1}.cpg-swatch__handle svg,.cpg-swatch__lock svg{width:1.1rem;height:1.1rem}.cpg-swatch__handle{cursor:grab}.cpg-swatch__handle:active{cursor:grabbing}.cpg-swatch__info{appearance:none;color:inherit;cursor:pointer;text-align:right;background:0 0;border:none;flex-direction:column;align-items:flex-end;gap:.15rem;padding:0;display:flex}.cpg-swatch__hex{font-family:var(--font-mono);letter-spacing:.02em;font-size:1rem;font-weight:600}.cpg-swatch__name{opacity:.75;font-size:.8rem}@media (width>=787px){.cpg-root{grid-template-columns:1fr auto;grid-template-areas:"toolbar export""palette palette";align-items:center}.cpg-toolbar__hint{display:block}.cpg-export-trigger{justify-self:end}.cpg-palette{flex-direction:row;height:min(68vh,620px);min-height:420px}.cpg-swatch{min-height:unset;flex-direction:column;justify-content:space-between;align-items:stretch;padding:1.5rem}.cpg-swatch__info{text-align:left;align-items:flex-start}.cpg-swatch__hex{font-size:1.1rem}}.cpg-export{flex-direction:column;gap:.75rem;display:flex}.cpg-export__option{appearance:none;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);cursor:pointer;width:100%;color:var(--ink);font-family:var(--font-body);flex-direction:column;align-items:flex-start;gap:.2rem;padding:.85rem 1rem;display:flex}.cpg-export__option:hover{border-color:var(--pine)}.cpg-export__option:disabled{opacity:.6;cursor:not-allowed}.cpg-export__option-toggle{appearance:none;text-align:left;cursor:pointer;width:100%;color:inherit;background:0 0;border:none;flex-direction:column;align-items:flex-start;gap:.2rem;padding:0;font-family:inherit;display:flex}.cpg-export__option-title{font-size:.92rem;font-weight:600}.cpg-export__option-desc{color:var(--graphite);font-size:.8rem}.cpg-export__snippets{border-top:1px solid var(--line);flex-direction:column;gap:.75rem;margin-top:.9rem;padding-top:.9rem;display:flex}.cpg-snippet{flex-direction:column;gap:.4rem;display:flex}.cpg-snippet__header{justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;display:flex}.cpg-snippet__header button{appearance:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:0 0;border-radius:6px;padding:.2rem .6rem;font-size:.75rem}.cpg-snippet__header button:hover{border-color:var(--pine)}.cpg-snippet__code{background:var(--surface);border:1px solid var(--line);font-family:var(--font-mono);white-space:pre;border-radius:6px;margin:0;padding:.65rem .8rem;font-size:.78rem;line-height:1.5;overflow-x:auto}