:root{color-scheme:light;--paper:#efeee9;--ink:#20211f;--muted:#666761;--card:#fffefa}*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 50% 35%,#f7f6f1 0%,var(--paper) 75%);min-width:280px}main{min-height:100svh;display:grid;place-items:center;padding:88px 48px 128px}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:60px;width:min(100%,660px)}.color-card{margin:0;display:block;position:relative;background:var(--card);color:inherit;text-decoration:none;box-shadow:0 1px 2px #27271910,0 10px 30px #27271909;transition:transform .18s ease,box-shadow .18s ease;outline-offset:8px}.swatch{width:100%;aspect-ratio:1}.card-label{height:148px;position:relative;padding:23px 23px 21px;display:flex;flex-direction:column;align-items:flex-start}.brand{font-size:27px;font-weight:800;letter-spacing:-1.1px;line-height:1.08}.reference{font-size:14px;line-height:1.3;letter-spacing:.045em;margin-top:14px}.project-name{font-size:18px;line-height:1.15;letter-spacing:.015em;margin-top:4px}.availability{position:absolute;right:23px;bottom:22px;font-size:10px;letter-spacing:.015em;color:var(--muted)}a.color-card:hover{transform:translateY(-5px);box-shadow:0 2px 4px #27271910,0 18px 35px #27271912}a.color-card:focus-visible{outline:2px solid var(--ink)}.view-control{position:fixed;left:32px;bottom:28px;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#efeee9e8;border-radius:24px;z-index:2;font-size:11px;line-height:1;color:var(--muted);backdrop-filter:blur(8px)}.view-control button{cursor:pointer;position:relative;width:44px;height:24px;padding:3px;border:1px solid #aaa9a0;border-radius:20px;background:#d8d8cf}.toggle-thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--ink);transform:translateX(0);transition:transform .18s ease}.view-control button[aria-checked=true] .toggle-thumb{transform:translateX(18px)}.view-control button:before{content:'';position:absolute;inset:-10px 0}.view-control button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}body[data-mode=name] #label-name,body[data-mode=function] #label-function{color:var(--ink);font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.noscript{max-width:400px;font-size:14px;line-height:1.8}.noscript a{color:inherit}@media(max-width:700px){main{padding:64px 24px 110px}.catalog{gap:26px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:540px}.card-label{height:130px;padding:18px}.brand{font-size:clamp(18px,3.6vw,24px);letter-spacing:-.7px}.reference{font-size:12px;margin-top:14px}.project-name{font-size:15px}.availability{right:18px;bottom:14px;font-size:9px}.view-control{left:14px;bottom:16px}}@media(max-width:460px){main{padding:40px 28px 108px;place-items:start center}.catalog{grid-template-columns:minmax(0,280px);gap:30px;width:100%;justify-content:center}.card-label{height:135px;padding:21px}.brand{font-size:26px}.reference{font-size:13px}.project-name{font-size:17px}.availability{right:21px;bottom:21px}}@media(prefers-reduced-motion:reduce){.color-card,.toggle-thumb{transition:none}a.color-card:hover{transform:none}}

/* A loose pair of printed swatches on a desk. Mobile retains the reading order. */
@media(min-width:701px){
 main{padding-top:130px;padding-bottom:170px}
 .catalog{column-gap:76px;row-gap:120px;width:min(100%,676px);padding-block:42px}
 .color-card{--card-angle:-5deg;--card-offset:-26px;transform:translateY(var(--card-offset)) rotate(var(--card-angle));box-shadow:0 2px 3px #27271910,0 20px 36px -14px #27271930}
 .color-card:nth-child(even){--card-angle:5deg;--card-offset:38px}
 a.color-card:hover,a.color-card:focus-visible{transform:translateY(calc(var(--card-offset) - 8px)) rotate(calc(var(--card-angle) * .45));z-index:1}
}
@media(prefers-reduced-motion:reduce) and (min-width:701px){
 a.color-card:hover,a.color-card:focus-visible{transform:translateY(var(--card-offset)) rotate(var(--card-angle))}
}