.shade-strip{width:100%;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;grid-gap:8px;gap:8px}.shade-nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:#111;cursor:pointer;border-radius:8px;transition:background .15s ease,transform .1s ease}.shade-nav:hover{background:rgba(0,0,0,.05)}.shade-nav:active{transform:translateY(1px)}.shade-nav:focus-visible{outline:2px solid #e45a80;outline-offset:2px}.shade-viewport{width:100%;overflow:hidden}.shade-track{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:clamp(10px,2vw,18px);gap:clamp(10px,2vw,18px);align-items:center;padding:4px 2px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.shade-track::-webkit-scrollbar{height:6px}.shade-track::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}.shade-track::-webkit-scrollbar-track{background:#f3f4f6}.shade-dot{position:relative;display:inline-block;text-decoration:none;outline:none}.shade-circle{width:28px;height:28px;border-radius:999px;border:1px solid #e5e7eb;background:#eee;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.shade-img{width:100%;height:100%;object-fit:cover;border-radius:999px}.shade-fallback{width:60%;height:60%;border-radius:999px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}.shade-dot.is-active .shade-circle{transform:scale(1.2);border-color:#c51a4a;box-shadow:0 0 0 2px rgba(197,26,74,.12)}.shade-dot:focus-visible .shade-circle,.shade-dot:hover .shade-circle{transform:scale(1.1);box-shadow:0 0 0 2px rgba(0,0,0,.12)}.shade-tooltip{position:absolute;top:50%;right:calc(100% + 8px);transform:translateY(-50%) translateX(4px);padding:6px 10px;font-size:12px;line-height:1;color:#fff;background:#000;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease,transform .12s ease;box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:3}.shade-dot:focus-visible .shade-tooltip,.shade-dot:hover .shade-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}.shade-tooltip:after{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);width:6px;height:6px;background:#000;border-radius:2px;-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);z-index:10}@media (max-width:420px){.shade-tooltip{top:auto;bottom:calc(100% + 8px);right:50%;transform:translateX(50%) translateY(4px)}.shade-dot:focus-visible .shade-tooltip,.shade-dot:hover .shade-tooltip{transform:translateX(50%) translateY(0)}.shade-tooltip:after{display:none}}@media (max-width:480px){.shade-circle{width:24px;height:24px}}.shade-tooltip-portal{position:fixed;transform:translate(-50%,-100%);background:#000;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;z-index:9999;box-shadow:0 6px 16px rgba(0,0,0,.18)}.shade-tooltip-portal__nub{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #000}