.cp-stage{display:grid;align-content:start;gap:var(--space-5);min-width:0}.cp-h{font-size:var(--text-lg);font-weight:600;margin-top:var(--space-2)}.cp-preview{--background: #fff;--text: #1f2228;--text-muted: #72767e;--primary: #2563eb;--on-primary: #fff;--link: #2563eb;--container: #eff4fc;--on-container: #1f2228;--primary-container: #dce8ff;--on-primary-container: #01195a;--container-link: #2562ea;--primary-container-link: #1f5ce4;--border: #8f949b;--divider: #dadee6;position:relative;display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--background);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:background-color var(--dur-2) var(--ease-move),color var(--dur-2) var(--ease-move)}@media(min-width:640px){.cp-preview{grid-template-columns:1fr 1fr;padding:var(--space-8);column-gap:var(--space-6)}}.cp-p-head{display:grid;gap:var(--space-2)}@media(min-width:640px){.cp-p-head,.cp-p-actions,.cp-p-input{grid-column:1 / -1}}.cp-p-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}.cp-p-title{font-size:var(--text-2xl);font-weight:600;letter-spacing:var(--tracking-tight);color:var(--text)}.cp-p-body{font-size:var(--text-base);color:var(--text);max-width:52ch}.cp-p-muted{font-size:var(--text-sm);color:var(--text-muted)}.cp-p-clink{color:var(--container-link)}.cp-p-plink{color:var(--primary-container-link)}.cp-p-clink,.cp-p-plink{font-weight:500;text-decoration:underline;text-underline-offset:3px}.cp-p-link{color:var(--link);font-weight:500;text-decoration:underline;text-underline-offset:3px}.cp-p-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.cp-p-btn{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 var(--space-5);border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-size:var(--text-sm);font-weight:600}.cp-p-btn.is-outline{background:transparent;color:var(--text);border:1px solid var(--border)}.cp-p-btn.is-icon{width:2.5rem;padding:0;justify-content:center}.cp-p-btn.is-icon .i{font-size:1.1rem}.cp-p-input{display:flex;align-items:center;min-height:2.5rem;max-width:24rem;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-muted);font-size:var(--text-sm)}.cp-p-card{display:grid;gap:var(--space-2);align-content:start;padding:var(--space-5);border-radius:var(--radius-md);background:var(--container);color:var(--on-container)}.cp-p-card h3{font-size:var(--text-md);font-weight:600;color:var(--on-container)}.cp-p-card p{font-size:var(--text-sm);color:var(--on-container)}.cp-p-hr{display:block;height:9px;background:linear-gradient(var(--divider),var(--divider)) center / 100% 1px no-repeat}.cp-p-row{display:flex;justify-content:space-between}.cp-p-callout{display:flex;gap:var(--space-3);align-items:flex-start;align-self:start;padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--primary-container);color:var(--on-primary-container);font-size:var(--text-sm)}.cp-p-callout .i{flex:none;font-size:1.2em;margin-top:1px}.cp-p-callout p{color:inherit}.cp-preview [data-cp]{border-radius:var(--radius-sm);cursor:help}.cp-preview :is(.cp-p-btn,.cp-p-input,.cp-p-card,.cp-p-callout){border-radius:var(--radius-md)}.cp-preview [data-cp].is-hot{outline:2px solid var(--text);outline-offset:3px}.cp-p-card [data-cp].is-hot{outline-color:var(--on-container)}.cp-p-callout [data-cp].is-hot{outline-color:var(--on-primary-container)}.cp-preview.is-hot{box-shadow:inset 0 0 0 2px var(--text)}.cp-tip{position:absolute;top:0;left:0;z-index:2;display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--ink);color:var(--paper);font-size:var(--text-xs);white-space:nowrap;box-shadow:var(--shadow-lg);pointer-events:none;animation:t-pop var(--dur-2) var(--ease-out)}.cp-tip[hidden]{display:none}.cp-tip b{font-weight:600}.cp-tip-row{display:flex;align-items:center;gap:var(--space-2)}.cp-tip-row i{width:.875rem;height:.875rem;border-radius:3px;background:var(--c);box-shadow:0 0 0 1px color-mix(in oklab,var(--paper) 40%,transparent)}.cp-tip-row code{margin-left:auto;padding-left:var(--space-3);font-family:var(--font-mono)}.cp-bar{display:flex;height:3.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);container-type:inline-size}.cp-bar-seg{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 var(--space-2);border:0;background:var(--c);color:var(--k);font:500 var(--text-2xs) / 1 var(--font-mono);cursor:copy}.cp-bar-seg span{opacity:0;transition:opacity var(--dur-1) var(--ease-move)}.cp-bar-seg:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--k);opacity:0;transition:opacity var(--dur-1) var(--ease-move)}.cp-bar-seg:is(:hover,:focus-visible,.is-hot):after{opacity:.7}.cp-bar-seg:focus-visible{outline:none}.cp-bar-seg:is(:hover,:focus-visible,.is-hot) span{opacity:1}@container (min-width: 640px){.cp-bar-seg span{opacity:.75}}@container (max-width: 520px){.cp-bar-seg span{display:none}}.cp-bar-seg.is-copied:after{opacity:1}.cp-roles{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden}.cp-role{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chip text hex" "chip ratio ratio";align-items:center;column-gap:var(--space-4);row-gap:var(--space-1);padding:var(--space-3) var(--space-4)}.cp-role+.cp-role{border-top:1px solid var(--line)}.cp-role{transition:background-color var(--dur-1) var(--ease-move)}.cp-role.is-hot{background:var(--accent-soft)}@media(min-width:640px){.cp-role{grid-template-columns:auto minmax(0,1fr) auto 12.5rem;grid-template-areas:"chip text hex ratio"}}.cp-chip{grid-area:chip;width:3rem;height:3rem;border-radius:var(--radius-md);background:var(--fill);color:var(--ink);border:1px solid var(--line);box-shadow:inset 0 0 0 3px var(--edge, transparent);font:600 var(--text-md) / 1 var(--font-display);cursor:copy;transition:transform var(--dur-1) var(--ease-move)}.cp-chip:active{transform:scale(var(--press))}.cp-role-text{grid-area:text;display:grid;min-width:0}.cp-role-name{font-size:var(--text-sm);font-weight:600}.cp-role-use{font-size:var(--text-xs);color:var(--ink-3)}.cp-hex{grid-area:hex;padding:var(--space-1) var(--space-2);border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--ink);font-size:var(--text-sm);cursor:copy}.cp-hex:hover{border-color:var(--line);background:var(--paper-2)}.cp-ratio{grid-area:ratio;display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}.cp-ratio b{font-weight:600}.cp-ratio .i{font-size:1.15em}.cp-ratio.is-pass .i{color:var(--accent)}.cp-ratio.is-fail{color:var(--danger)}.cp-ratio.is-none{color:var(--ink-3)}.cp-apca{margin-left:var(--space-2);color:var(--ink-3)}.cp-role:after{content:"Copied";position:absolute;right:var(--space-4);top:50%;translate:0 -50%;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font-size:var(--text-xs);font-weight:500;opacity:0;pointer-events:none;transition:opacity var(--dur-1) var(--ease-move)}.cp-role.is-copied:after{opacity:1}.cp-pick{display:flex;gap:var(--space-2)}.cp-swatch{flex:none;appearance:none;width:var(--target-min);height:var(--target-min);padding:3px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);cursor:pointer}.cp-swatch:hover{border-color:color-mix(in oklab,var(--ink) 22%,transparent)}.cp-swatch:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--field-ring)}.cp-swatch::-webkit-color-swatch-wrapper{padding:0}.cp-swatch::-webkit-color-swatch{border:1px solid var(--line);border-radius:calc(var(--radius-md) - 4px)}.cp-swatch::-moz-color-swatch{border:1px solid var(--line);border-radius:calc(var(--radius-md) - 4px)}.cp-pick .control[aria-invalid]{border-color:var(--danger)}.cp-msg:empty{display:none}.cp-msg{color:var(--danger)}.cp-try{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.cp-try .chip{min-height:2.25rem;padding-inline:var(--space-3);font-size:var(--text-xs)}.cp-try .chip i{width:1rem;height:1rem;border-radius:50%;background:var(--a);box-shadow:0 0 0 1px var(--line)}.cp-tool .seg-toggle{width:100%}@media(max-width:959px){.cp-tool .ws-side{border-bottom:1px solid var(--line)}}@media(min-width:960px){.cp-tool .ws-stage{order:-1}}.cp-code{max-height:15rem;overflow:auto;white-space:pre;line-height:1.7;color:var(--ink);scrollbar-width:thin}