.cpg-container{--cpg-radius:16px;--cpg-radius-sm:11px;flex-direction:column;gap:28px;width:100%;min-width:0;display:flex}.cpg-workspace{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:1040px;margin:0 auto;display:grid}.cpg-panel{flex-direction:column;min-width:0;height:100%;display:flex}.cpg-panel-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.cpg-panel-heading{flex-direction:column;min-width:0;display:flex}.cpg-panel-kicker{width:fit-content;color:var(--primary);font-family:var(--font-ui);letter-spacing:.14em;text-transform:uppercase;align-items:center;margin-bottom:5px;font-size:.64rem;font-weight:800;line-height:1;display:inline-flex}.cpg-panel-heading h2{color:inherit;font-family:var(--font-display);margin:0;font-size:1.2rem;font-weight:700;line-height:1.3}.cpg-random-button{border:1px solid var(--border);min-height:34px;color:inherit;font-family:var(--font-ui);cursor:pointer;background:0 0;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;gap:7px;padding:7px 11px;font-size:.76rem;font-weight:700;transition:background .16s,border-color .16s,color .16s,transform .16s;display:inline-flex}.cpg-random-button:hover{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb, var(--primary) 7%, transparent);transform:translateY(-1px)}.cpg-random-button:active{transform:translateY(0)}.cpg-random-button svg{transition:transform .3s}.cpg-random-button:hover svg{transform:rotate(90deg)}.cpg-picker{width:100%;min-width:0}.cpg-color-input{flex-direction:column;gap:14px;display:flex}.cpg-color-input .ticket-color{width:100%}.cpg-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;display:grid}.cpg-mode-button{border:1px solid var(--border);border-radius:var(--cpg-radius-sm);min-width:0;min-height:76px;color:inherit;text-align:left;cursor:pointer;background:0 0;flex-direction:column;align-items:flex-start;padding:13px 14px;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;display:flex;position:relative}.cpg-mode-button:hover{border-color:color-mix(in srgb, var(--primary) 45%, var(--border));background:color-mix(in srgb, var(--primary) 4%, transparent);transform:translateY(-1px)}.cpg-mode-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.cpg-mode-button strong{font-family:var(--font-ui);margin-bottom:5px;font-size:.79rem;font-weight:750;line-height:1.3}.cpg-mode-button span{color:inherit;opacity:.55;font-family:var(--font-ui);font-size:.7rem;line-height:1.35}.cpg-mode-button.active{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 9%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent)}.cpg-mode-button.active strong{color:var(--primary)}.cpg-mode-button.active span{opacity:.72}.cpg-mode-button.active:after{content:"";background:var(--primary);width:6px;height:6px;box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);border-radius:50%;position:absolute;top:12px;right:12px}.cpg-palette-section{flex-direction:column;width:100%;min-width:0;display:flex}.cpg-section-heading{justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;display:flex}.cpg-section-heading>div{flex-direction:column;display:flex}.cpg-section-heading h2{font-family:var(--font-display);margin:0;font-size:1.25rem;line-height:1.3}.cpg-section-format{border:1px solid var(--border);letter-spacing:.08em;opacity:.6;border-radius:7px;flex-shrink:0;padding:5px 8px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.65rem;font-weight:700}.cpg-palette-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;display:grid}.cpg-color-card{width:100%;min-width:0;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:0;flex-direction:column;padding:0;display:flex}.cpg-color-card:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:10px}.cpg-color-preview{aspect-ratio:.82;border-radius:var(--cpg-radius-sm);width:100%;transition:transform .18s,box-shadow .18s,filter .18s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000000f}.cpg-color-card:hover .cpg-color-preview{filter:brightness(1.025);transform:translateY(-3px);box-shadow:0 8px 20px #0000001a,inset 0 0 0 1px #0000000d}.cpg-copy-overlay{opacity:0;color:#fff;font-family:var(--font-ui);text-shadow:0 1px 3px #0000004d;pointer-events:none;background:linear-gradient(#0000000a,#00000038);justify-content:center;align-items:center;font-size:.7rem;font-weight:750;transition:opacity .16s;display:flex;position:absolute;inset:0}.cpg-color-card:hover .cpg-copy-overlay,.cpg-color-card:focus-visible .cpg-copy-overlay{opacity:1}.cpg-color-info{flex-direction:column;gap:4px;min-width:0;padding:10px 2px 0;display:flex}.cpg-color-info strong{font-family:var(--font-ui);text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:750;line-height:1.3;overflow:hidden}.cpg-color-info span{color:inherit;opacity:.58;text-overflow:ellipsis;white-space:nowrap;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.68rem;line-height:1.4;overflow:hidden}.tool-info{flex-direction:column;gap:26px;width:100%;display:flex}@media (max-width:900px){.cpg-workspace{grid-template-columns:1fr;max-width:720px}.cpg-palette-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (max-width:700px){.cpg-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cpg-color-preview{aspect-ratio:1/1.05}}@media (max-width:640px){.cpg-container{gap:24px}.cpg-workspace{gap:12px}.cpg-panel-header{margin-bottom:16px}.cpg-panel-heading h2,.cpg-section-heading h2{font-size:1.08rem}.cpg-panel-kicker{font-size:.6rem}.cpg-mode-grid{grid-template-columns:1fr}.cpg-mode-button{min-height:64px}.cpg-section-heading{align-items:center;margin-bottom:16px}.cpg-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cpg-color-preview{aspect-ratio:1.1}.cpg-color-info{padding-top:8px}.tool-info{gap:22px}}@media (max-width:380px){.cpg-container{gap:20px}.cpg-panel-header{gap:8px}.cpg-random-button{padding-inline:9px}.cpg-random-button span{display:none}.cpg-palette-grid{gap:9px}.cpg-color-preview{aspect-ratio:1}.cpg-color-info strong{font-size:.72rem}.cpg-color-info span{font-size:.64rem}}.cpg-harmony-info{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.cpg-harmony-item{border:1px solid var(--border);background:color-mix(in srgb, var(--primary) 2.5%, transparent);border-radius:12px;flex-direction:column;min-width:0;padding:16px;display:flex}.cpg-harmony-item-header{align-items:center;gap:9px;margin-bottom:9px;display:flex}.cpg-harmony-number{background:color-mix(in srgb, var(--primary) 10%, transparent);width:26px;height:26px;color:var(--primary);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.62rem;font-weight:800;display:inline-flex}.cpg-harmony-item h3{font-family:var(--font-display);margin:0;font-size:.98rem;font-weight:700;line-height:1.3}.cpg-harmony-item p{opacity:.72;margin:0 0 11px;font-size:.86rem;line-height:1.7}.cpg-harmony-use{color:inherit;opacity:.55;margin-top:auto;font-size:.73rem;font-weight:600;line-height:1.5}@media (max-width:640px){.cpg-harmony-info{grid-template-columns:1fr;gap:10px}.cpg-harmony-item{padding:14px}.cpg-harmony-item p{font-size:.83rem}}@media (prefers-reduced-motion:reduce){.cpg-container *,.cpg-container :before,.cpg-container :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}