.aa-colour-studio{display:block;padding-top:55px;padding-bottom:48px;color:#26312d}
.aa-colour-studio-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:27px}.aa-colour-studio-heading small{font-size:10px;letter-spacing:.12em;font-weight:700;color:#647057}.aa-colour-studio-heading h2{font-size:34px;letter-spacing:-.04em;margin:10px 0}.aa-colour-studio-heading p{font-size:14px;color:#657060;margin:0;line-height:1.7}
.aa-colour-controls{display:flex;gap:9px}.aa-colour-controls[hidden]{display:none}.aa-colour-controls button{width:46px;height:46px;border:1px solid #d6ddd0;border-radius:50%;background:#fff;color:#26312d;font-size:23px;display:grid;place-items:center;cursor:pointer}.aa-colour-controls button:hover{background:#eaf0da}
.aa-colour-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:5px 2px 18px}.aa-colour-rail::-webkit-scrollbar{display:none}
.aa-colour-sample{flex:0 0 calc((100% - 80px)/4.5);min-width:205px;scroll-snap-align:start;text-decoration:none;color:#26312d}.aa-colour-sample:focus-visible{outline:2px solid #52663b;outline-offset:0;border-radius:6px}
.aa-colour-stage{aspect-ratio:1/1.05;position:relative;overflow:hidden;border-radius:6px 6px 0 0;isolation:isolate}.aa-colour-index{position:absolute;top:18px;left:17px;z-index:1;background:#ffffffed;color:#26312d;border-radius:999px;padding:7px 10px;font-size:8px;font-weight:700;letter-spacing:.08em}
.aa-colour-bands{position:absolute;inset:0;display:flex;align-items:end;transform:skewY(-18deg) translateY(23%);transform-origin:bottom left;transition:transform .25s ease}.aa-colour-bands span{height:100%;flex:1;background:#ffffff18}.aa-colour-bands span:nth-child(2){background:#ffffff38}.aa-colour-bands span:nth-child(3){background:#00000012}.aa-colour-sample:hover .aa-colour-bands{transform:skewY(-18deg) translateY(17%)}
.aa-colour-label{display:flex;justify-content:space-between;align-items:center;padding:17px 15px;background:#f4f6f0;border-radius:0 0 6px 6px;gap:10px}.aa-colour-label h3{font-size:18px;margin:0 0 6px}.aa-colour-label>div>span{font-size:11px;color:#68725f}.aa-colour-arrow{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;border:1px solid #d2dbc7;font-size:20px}.aa-colour-sample:hover .aa-colour-arrow{background:#c6da62}.aa-colour-note{font-size:11px;color:#6b7365;margin:13px 0 0;line-height:1.6}
@media(max-width:749px){.aa-colour-studio{padding-top:32px;padding-bottom:32px}.aa-colour-studio-heading{gap:14px;align-items:start}.aa-colour-studio-heading h2{font-size:27px}.aa-colour-studio-heading p{font-size:12px}.aa-colour-controls{gap:5px}.aa-colour-controls button{width:36px;height:36px}.aa-colour-sample{flex-basis:72%;min-width:0;max-width:280px}.aa-colour-rail{gap:15px}}
@media(prefers-reduced-motion:reduce){.aa-colour-bands{transition:none}}