.cpal{--cpal-accent:var(--brass-lo);gap:var(--s5);display:grid}.cpal h2,.cpal h3,.cpal p{margin:0}.cpal-install,.cpal-source,.cpal-results,.cpal-export{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-0);box-shadow:var(--shadow-1)}.cpal-install{gap:var(--s4) var(--s6);padding:clamp(var(--s4), 4vw, var(--s6));grid-template-columns:minmax(0,1.15fr) minmax(17rem,.75fr);display:grid;position:relative;overflow:hidden}.cpal-install:after{content:"";background:conic-gradient(from 30deg, var(--brass-wash), var(--surface-2), var(--brass-wash));pointer-events:none;border-radius:50%;width:18rem;height:18rem;position:absolute;top:-9rem;right:-7rem}.cpal-intro,.cpal-steps,.cpal-boundary{z-index:1;position:relative}.cpal-intro{gap:var(--s2);align-content:start;display:grid}.cpal-intro>p:last-of-type,.cpal-boundary,.cpal-source>p,.cpal-results>header>span,.cpal-vars>p{color:var(--ink-2);line-height:1.6}.cpal-kicker{color:var(--cpal-accent);font:700 var(--step--1)/1.2 var(--font-mono);letter-spacing:.09em;text-transform:uppercase}.cpal-bookmarklet,.cpal-download{border:1px solid var(--cpal-accent);border-radius:var(--r-md);background:var(--cpal-accent);min-height:2.9rem;color:var(--on-brass);padding-inline:var(--s4);justify-content:center;align-items:center;font-weight:750;text-decoration:none;display:inline-flex}.cpal-bookmarklet{margin-top:var(--s2);cursor:grab;justify-self:start}.cpal-steps{gap:var(--s2);margin:0;padding:0;list-style:none;display:grid}.cpal-steps li{gap:.15rem var(--s2);grid-template-columns:2rem minmax(0,1fr);display:grid}.cpal-steps li>span{border:1px solid var(--cpal-accent);width:2rem;height:2rem;color:var(--cpal-accent);font:700 var(--step--1)/1 var(--font-mono);border-radius:50%;grid-row:span 2;place-items:center;display:grid}.cpal-steps p{color:var(--ink-2);font-size:var(--step--1)}.cpal-boundary{padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--step--1);grid-column:1/-1}.cpal-import{padding-block:var(--s3);border-block:1px solid var(--line)}.cpal-import summary,.cpal-vars summary{cursor:pointer;font-weight:750}.cpal-import label{gap:var(--s1);max-width:34rem;margin-top:var(--s3);display:grid}.cpal-import input{max-width:100%;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-0)}.cpal-size-advice{justify-content:space-between;align-items:center;gap:var(--s3);max-width:42rem;margin-top:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);display:flex}.cpal-size-advice>div{gap:var(--s1);display:flex}.cpal-size-advice button{border:1px solid var(--line-firm);border-radius:var(--r-sm);background:var(--surface-0);color:var(--ink-1);cursor:pointer;padding:.55rem .7rem}.cpal-notice,.cpal-error{padding:var(--s3);border-left:3px solid var(--cpal-accent);background:var(--surface-2)}.cpal-error{border-color:var(--error);color:var(--error)}.cpal-source,.cpal-results,.cpal-export{padding:clamp(var(--s3), 4vw, var(--s5))}.cpal-source>header,.cpal-results>header,.cpal-export>header{justify-content:space-between;align-items:end;gap:var(--s4);display:flex}.cpal-source>header>div,.cpal-results>header>div,.cpal-export>header>div{gap:var(--s1);min-width:0;display:grid}.cpal-source>header a{overflow-wrap:anywhere}.cpal-source dl{margin:var(--s4) 0;border-block:1px solid var(--line);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.cpal-source dl>div{padding:var(--s3);border-right:1px solid var(--line)}.cpal-source dl>div:last-child{border:0}.cpal-source dt{color:var(--ink-2);font-size:var(--step--1)}.cpal-source dd{margin:var(--s1) 0 0;font:750 var(--step-1)/1 var(--font-mono)}.cpal-results{gap:var(--s4);display:grid}.cpal-section-head{justify-content:space-between;align-items:baseline;gap:var(--s2);display:flex}.cpal-section-head>span{color:var(--ink-2);font:var(--step--1)/1.3 var(--font-mono)}.cpal-colors{gap:var(--s2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.cpal-colors button{gap:.2rem var(--s2);min-width:0;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-1);color:var(--ink-1);text-align:left;cursor:pointer;grid-template-columns:2.8rem minmax(0,1fr);align-items:center;display:grid}.cpal-swatch{border:1px solid var(--line-firm);border-radius:var(--r-sm);grid-row:span 4;width:2.8rem;height:4.2rem}.cpal-colors strong,.cpal-colors small,.cpal-colors em{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cpal-colors strong{font:700 var(--step--1)/1.2 var(--font-mono)}.cpal-colors small{color:var(--ink-2);font-size:.72rem}.cpal-colors em{color:var(--cpal-accent);font:normal 650 .7rem/1.2 var(--font-mono)}.cpal-columns{gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.cpal-columns>section{align-content:start;gap:var(--s3);min-width:0;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);display:grid}.cpal-fonts{gap:var(--s2);display:grid}.cpal-fonts article{padding:var(--s2);border-bottom:1px solid var(--line);gap:.2rem;min-width:0;display:grid}.cpal-fonts article:last-child{border:0}.cpal-fonts p{font-size:var(--step-1);overflow-wrap:anywhere}.cpal-fonts strong{font:650 var(--step--1)/1.4 var(--font-mono);overflow-wrap:anywhere}.cpal-fonts small{color:var(--ink-2);overflow-wrap:anywhere}.cpal-scale{gap:var(--s2);margin:0;padding:0;list-style:none;display:grid}.cpal-scale li{gap:var(--s2);grid-template-columns:minmax(2.5rem,1fr) 4.5rem minmax(5rem,auto);align-items:center;display:grid}.cpal-scale li>span{background:var(--cpal-accent);border-radius:99px;min-width:3px;height:.75rem;display:block}.cpal-scale strong{font:650 var(--step--1)/1 var(--font-mono)}.cpal-scale small{color:var(--ink-2);text-align:right}.cpal-radii{gap:var(--s2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.cpal-radii>div{min-height:5rem;padding:var(--s2);border:2px solid var(--cpal-accent);background:color-mix(in srgb, var(--cpal-accent) 7%, transparent);text-align:center;place-content:center;gap:.2rem;display:grid}.cpal-radii strong{font-family:var(--font-mono)}.cpal-radii small{color:var(--ink-2)}.cpal-shadows{gap:var(--s2);display:grid}.cpal-shadows article{gap:var(--s3);grid-template-columns:3rem minmax(0,1fr);align-items:center;min-width:0;display:grid}.cpal-shadows article>span{border-radius:var(--r-sm);background:var(--surface-0);width:3rem;height:3rem;display:block}.cpal-shadows article>div{gap:.2rem;min-width:0;display:grid}.cpal-shadows code{color:var(--ink-2);overflow-wrap:anywhere;font-size:.7rem;display:block}.cpal-vars{padding-top:var(--s3);border-top:1px solid var(--line)}.cpal-vars>p{margin-top:var(--s2)}.cpal-vars>div{gap:var(--s1);margin-top:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.cpal-vars button{gap:var(--s2);padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-1);color:var(--ink-1);text-align:left;cursor:pointer;grid-template-columns:minmax(8rem,.7fr) minmax(0,1fr) auto;min-width:0;display:grid}.cpal-vars code{color:var(--cpal-accent);overflow-wrap:anywhere}.cpal-vars button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cpal-vars small{color:var(--ink-2)}.cpal-export{gap:var(--s3);display:grid}.cpal-export header button,.cpal-package button{border:1px solid var(--cpal-accent);border-radius:var(--r-md);color:var(--cpal-accent);cursor:pointer;background:0 0;padding:.7rem 1rem;font-weight:700}.cpal-export pre{max-height:28rem;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);margin:0;font-size:.78rem;overflow:auto}.cpal-package{justify-content:space-between;align-items:center;gap:var(--s4);display:flex}.cpal-package ul{gap:var(--s1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.cpal-package li{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-1);padding:.4rem .55rem}.cpal-package .cpal-download{background:var(--cpal-accent);color:var(--on-brass);flex:none}.cpal-download:disabled{opacity:.6;cursor:wait}.cpal-verified{color:var(--success);font:650 var(--step--1)/1.5 var(--font-mono)}@media (width<=900px){.cpal-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.cpal-source dl{grid-template-columns:repeat(3,minmax(0,1fr))}.cpal-source dl>div:nth-child(3){border-right:0}.cpal-source dl>div:nth-child(-n+3){border-bottom:1px solid var(--line)}}@media (width<=680px){.cpal-install,.cpal-columns{grid-template-columns:1fr}.cpal-boundary{grid-column:auto}.cpal-source>header,.cpal-results>header,.cpal-export>header,.cpal-package,.cpal-size-advice{flex-direction:column;align-items:stretch}.cpal-vars>div{grid-template-columns:1fr}}@media (width<=430px){.cpal-colors{grid-template-columns:1fr}.cpal-source dl{grid-template-columns:repeat(2,minmax(0,1fr))}.cpal-source dl>div:nth-child(3){border-right:1px solid var(--line)}.cpal-source dl>div:nth-child(2n){border-right:0}.cpal-source dl>div:nth-child(-n+4){border-bottom:1px solid var(--line)}.cpal-vars button{grid-template-columns:1fr}.cpal-radii{grid-template-columns:repeat(2,minmax(0,1fr))}}