.w-colour-pairs{container-type:inline-size;margin-top:clamp(26px,3vw,40px)}.w-colour-pairs .cp{display:grid;grid-template-columns:minmax(0,1fr)}.w-colour-pairs .cp-art{position:relative;overflow:hidden;background:var(--paper);border:1px solid rgba(56,60,66,.1);box-shadow:0 30px 60px -46px rgba(20,22,25,.55)}.w-colour-pairs .cp-art::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;background:var(--sheen)}.w-colour-pairs .cp-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 68%);transform:translateX(-115%)}.w-colour-pairs .cp-art.is-sweep::after{animation:wColourPairsSweep 1.4s var(--ease-o) both}@keyframes wColourPairsSweep{from{transform:translateX(-115%)}to{transform:translateX(115%)}}.w-colour-pairs .kc{display:block;width:100%;height:auto;color:var(--graphite);fill:none;stroke:currentColor;stroke-width:1}.w-colour-pairs .kc *{vector-effect:non-scaling-stroke}.js .w-colour-pairs .cp-art[data-rv] .kc{clip-path:inset(0 100% 0 0);transition:clip-path 1.7s var(--ease-o) .25s}.js .w-colour-pairs .cp-art[data-rv].in .kc{clip-path:inset(0)}.w-colour-pairs .kc-floor .fl{fill:#F2F1EE;stroke:none}.w-colour-pairs .kc-floor path{stroke-opacity:.13}.w-colour-pairs .kc-floor .kc-base{stroke-opacity:.4}.w-colour-pairs .kc-obj{stroke-opacity:.6}.w-colour-pairs .kc-obj .sh{fill:#FBFAF8}.w-colour-pairs .kc-lamps path{stroke-opacity:.5}.w-colour-pairs .kc-lamps .lp{fill:#FFFFFF;stroke-opacity:.75}.w-colour-pairs .kc-shadow{fill:#000;fill-opacity:.075;stroke:none}.w-colour-pairs .kc-top rect{fill:#F7F6F3;stroke-opacity:.62}.w-colour-pairs .kc-tap{color:#8F949A;stroke-width:1.5}.w-colour-pairs .kc-cab,.w-colour-pairs .kc-isl{transition:fill .95s var(--ease),color .95s var(--ease)}.w-colour-pairs .kc-cab rect,.w-colour-pairs .kc-isl rect{stroke-opacity:.95}.w-colour-pairs .kc-cab .dr,.w-colour-pairs .kc-isl .dr{stroke-opacity:.8}.w-colour-pairs .kc-cab .rc,.w-colour-pairs .kc-isl .rc{fill:#000;fill-opacity:.055;stroke-opacity:.5}.w-colour-pairs .kc-cab .ln{stroke-opacity:.6}.w-colour-pairs .kc-range{color:#6A6F76}.w-colour-pairs .kc-range .sp{fill:#EFEEEB;stroke:none}.w-colour-pairs .kc-range .rg{fill:#3A3D42}.w-colour-pairs .kc-range .rh{fill:#2A2C30}.w-colour-pairs .kc-range .ov{fill:#34373C;stroke:#7D828A}.w-colour-pairs .kc-range path{stroke:#B3B8BE;stroke-width:1.5}.w-colour-pairs .kc-range circle{fill:#B3B8BE;stroke:none}.w-colour-pairs .kc-hw{transition:color .95s var(--ease)}.w-colour-pairs .kc-hw .kn{fill:currentColor;stroke:none}.w-colour-pairs .kc-hw .cu{fill:none;stroke:currentColor;stroke-width:1.3}.w-colour-pairs .cp-pick{margin-top:26px}.w-colour-pairs .cp-k,.w-colour-pairs .cp-proj{font:500 12px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}.w-colour-pairs .cp-tabs{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));margin-top:12px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.w-colour-pairs .cp-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-width:0;min-height:58px;padding:16px 8px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;color:var(--soft);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}.w-colour-pairs .cp-tab[aria-selected=true]{background:var(--paper);color:var(--graphite);box-shadow:inset 0 -2px 0 var(--graphite)}.w-colour-pairs .cp-tab:focus-visible{outline-offset:-5px}.w-colour-pairs .cp-sw{display:flex}.w-colour-pairs .cp-sw i{display:block;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1.5px var(--paper),inset 0 0 0 1px rgba(0,0,0,.09)}.w-colour-pairs .cp-sw i+i{margin-left:-8px}.w-colour-pairs .cp-tn{font:400 16px/1.25 var(--serif);text-wrap:balance}@media(hover:hover)and (pointer:fine){.w-colour-pairs .cp-tab:not([aria-selected=true]):hover{background:rgba(255,255,255,.55);color:var(--graphite)}}.w-colour-pairs .cp-panels{display:grid;margin-top:30px}.w-colour-pairs .cp-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}.w-colour-pairs .cp-panel[hidden]{display:block}.w-colour-pairs .cp-panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease) .15s,transform .9s var(--ease-o) .15s,visibility 0s}.w-colour-pairs .cp-t{margin-top:10px;font:300 clamp(28px,5cqi,40px)/1.1 var(--serif);color:var(--graphite)}.w-colour-pairs .cp-spec{margin-top:20px;border-top:1px solid var(--line)}.w-colour-pairs .cp-spec div{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.w-colour-pairs .cp-spec dt{font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}.w-colour-pairs .cp-spec dd{display:flex;align-items:center;gap:14px;min-width:0}.w-colour-pairs .cp-dot{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}.w-colour-pairs .cp-spec dd span{min-width:0}.w-colour-pairs .cp-spec b{display:block;font:400 21px/1.2 var(--serif);color:var(--graphite)}.w-colour-pairs .cp-spec small{display:block;margin-top:3px;font:500 12px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}.w-colour-pairs .cp-d{margin-top:16px;font-size:15px;line-height:1.7;color:var(--soft)}.w-colour-pairs .cp-go{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:12px 0 8px;font:500 13px/1.2 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:gap .4s var(--ease),background-size .5s var(--ease-o)}.w-colour-pairs .cp-go:hover{gap:18px;background-size:40% 1px}.w-colour-pairs .cp-note{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font:italic 300 17px/1.55 var(--serif);color:var(--soft)}@container (max-width:479px){.w-colour-pairs .cp-tab{justify-content:center;padding:0 2px;min-height:56px}.w-colour-pairs .cp-tn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.w-colour-pairs .cp-sw i{width:21px;height:21px}.w-colour-pairs .cp-sw i+i{margin-left:-7px}.w-colour-pairs .cp-go{gap:10px;font-size:12px;letter-spacing:.13em}}@container (max-width:339px){.w-colour-pairs .cp-spec div{grid-template-columns:minmax(0,1fr);gap:8px}}@container (min-width:820px){.w-colour-pairs .cp{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(36px,4.4cqi,72px)}.w-colour-pairs .cp-art{grid-column:1;grid-row:1 / 4;align-self:start}.w-colour-pairs .cp-pick{grid-column:2;grid-row:1;margin-top:0}.w-colour-pairs .cp-panels{grid-column:2;grid-row:2}.w-colour-pairs .cp-note{grid-column:2;grid-row:3;align-self:start}.w-colour-pairs .cp-t{font-size:clamp(30px,2.8cqi,40px)}}@media(pointer:coarse){.w-colour-pairs .cp-go{min-height:44px}}