.color-picker-page{max-width:1120px;margin:0 auto;padding:2rem 0 4rem}.color-picker-page .breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:2.5rem;color:var(--muted);font-size:.86rem}.color-picker-page .breadcrumb a{font-weight:700;text-decoration:none}.color-picker-intro,.color-picker-panel-heading,.color-picker-values-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.color-picker-intro{align-items:flex-end;gap:2rem;margin-bottom:2rem}.color-picker-intro .utility-intro{max-width:760px;margin-bottom:0;color:var(--muted)}.color-picker-badge{display:inline-flex;align-items:center;flex:0 0 auto;gap:.45rem;padding:.45rem .75rem;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent-dark);font-size:.8rem;font-weight:750}.color-picker-workbench{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(18rem,.7fr);gap:1rem}.color-picker-main-panel,.color-picker-variations-panel,.color-picker-values-panel,.color-picker-information{padding:1.35rem;border:1px solid var(--line);border-radius:1.1rem;background:var(--surface);box-shadow:var(--shadow)}.color-picker-panel-heading h2,.color-picker-values-heading h2,.color-picker-information h2{margin:.08rem 0 0;font-size:1.15rem}.color-picker-panel-heading p,.color-picker-values-heading>div>p,.color-picker-information p{max-width:31rem;margin:0;color:var(--muted);font-size:.84rem;line-height:1.45}.color-picker-controls{display:grid;grid-template-columns:minmax(12rem,.72fr) minmax(18rem,1.28fr);gap:1.1rem;margin-top:1.25rem}.color-picker-palette-section,.color-picker-spectrum-section{min-width:0}.color-picker-palette-section h3,.color-picker-spectrum-section h3{margin:0 0 .65rem;color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}.color-picker-palette{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.28rem}.color-picker-swatch,.color-picker-variation{position:relative;min-height:1.55rem;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:.26rem;background:var(--swatch);cursor:pointer}.color-picker-swatch:hover,.color-picker-variation:hover{transform:translateY(-1px)}.color-picker-swatch:focus-visible,.color-picker-variation:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.color-picker-swatch.is-selected:after{content:"";position:absolute;inset:.16rem;border:2px solid var(--contrast-text);border-radius:.12rem;box-shadow:0 0 0 1px var(--contrast-surface)}.color-picker-hex-field,.color-picker-native-field,.color-picker-range-field{display:grid;gap:.38rem;margin-top:.9rem}.color-picker-hex-field>span,.color-picker-native-field>span,.color-picker-range-field>span{display:flex;justify-content:space-between;color:var(--muted);font-size:.69rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.color-picker-hex-field input{width:100%;min-height:2.65rem;padding:.55rem .7rem;border:1px solid var(--input-border);border-radius:.65rem;background:var(--surface-alt);color:var(--ink);font:700 .95rem ui-monospace,SFMono-Regular,Consolas,monospace}.color-picker-hex-field input:focus{border-color:var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 18%,transparent);outline-offset:1px}.color-picker-native-field input{width:100%;height:2.65rem;padding:.18rem;border:1px solid var(--input-border);border-radius:.65rem;background:var(--surface-alt);cursor:pointer}.color-picker-spectrum{position:relative;min-height:15.3rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:.7rem;background-color:hsl(291 62% 50%);background-image:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,transparent);cursor:crosshair;touch-action:none}.color-picker-spectrum-marker{position:absolute;width:1.05rem;height:1.05rem;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none}.color-picker-range-field input{width:100%;accent-color:var(--accent)}.color-picker-variations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:1.25rem}.color-picker-variation{min-height:4.5rem;padding:.55rem;text-align:left;transition:transform 150ms ease}.color-picker-variation span,.color-picker-variation code{display:block;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}.color-picker-variation span{font-size:.72rem;font-weight:800}.color-picker-variation code{margin-top:.15rem;font-size:.75rem}.color-picker-values-panel{margin-top:1rem}.color-picker-selected-swatch{width:4rem;height:4rem;flex:0 0 auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:.8rem;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 50%/12px 12px}.color-picker-selected-swatch:after{content:"";display:block;width:100%;height:100%;background:var(--selected-color)}.color-picker-values-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.1rem}.color-picker-value{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;min-width:0;padding:.72rem .8rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface-alt);color:var(--ink);text-align:left;cursor:pointer}.color-picker-value:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}.color-picker-value:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px}.color-picker-value span{color:var(--accent-dark);font-size:.67rem;font-weight:850;letter-spacing:.08em}.color-picker-value code{overflow:hidden;color:var(--ink);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.color-picker-value i{color:var(--muted)}.color-picker-status{min-height:1.35rem;margin:.8rem 0 0;color:var(--accent-dark);font-size:.82rem;font-weight:700}.color-picker-information{margin-top:1rem}.color-picker-information p{margin-top:.7rem}.color-picker-information .muted i{margin-right:.45rem}@media(max-width:820px){.color-picker-workbench{grid-template-columns:1fr}.color-picker-variations{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:620px){.color-picker-page{padding-top:1.35rem}.color-picker-intro,.color-picker-values-heading{align-items:flex-start;flex-direction:column}.color-picker-controls,.color-picker-values-grid{grid-template-columns:1fr}.color-picker-spectrum{min-height:13rem}.color-picker-variations{grid-template-columns:repeat(2,minmax(0,1fr))}}