.clip{--k:0;color:var(--ink);font:inherit;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;background:0 0;border:0;align-items:center;gap:10px;padding:0;display:inline-flex}.clip__dot{width:44px;height:44px;color:var(--gold);border:1px solid color-mix(in oklab, var(--gold) 55%, transparent);border-radius:50%;flex:none;place-items:center;transition:background .2s,color .2s,border-color .2s;display:grid;position:relative}.clip__dot:before{content:"";background:conic-gradient(var(--gold) calc(var(--k) * 1turn), transparent 0);opacity:0;border-radius:50%;position:absolute;inset:-1px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px))}.clip.is-on .clip__dot{background:color-mix(in oklab, var(--gold) 12%, transparent);border-color:#0000}.clip.is-on .clip__dot:before{opacity:1}.clip__label{font:500 12.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}@media (hover:hover){.clip:hover .clip__dot{background:var(--gold);color:var(--paper);border-color:var(--gold)}.clip:hover .clip__label{color:var(--ink)}}.clip:focus-visible{outline:none}.clip:focus-visible .clip__dot{outline:2px solid var(--gold);outline-offset:3px}.cliptile{--k:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;gap:10px;padding:0;display:grid}.cliptile__pic{aspect-ratio:4/3;background:var(--paper);box-shadow:0 10px 24px -18px color-mix(in oklab, var(--ink) 70%, transparent);border-radius:12px;display:block;position:relative;overflow:hidden}.cliptile__pic img{object-fit:cover;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1);display:block}.cliptile__pic:after{content:"";pointer-events:none;background:linear-gradient(#0000 45%,#0000006b);position:absolute;inset:0}.cliptile__dot{z-index:1;color:#1d1a22;background:#f6f1e6;border-radius:50%;place-items:center;width:40px;height:40px;transition:transform .2s,background .2s;display:grid;position:absolute;bottom:14px;left:12px}.cliptile__bar{z-index:1;height:4px;width:calc(var(--k) * 100%);background:var(--tc);position:absolute;bottom:0;left:0}.cliptile__name{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);align-items:center;gap:8px;display:flex}.cliptile__name:before{content:"";background:var(--tc);border-radius:50%;flex:none;width:8px;height:8px}.cliptile.is-on .cliptile__name{color:var(--ink)}@media (hover:hover){.cliptile:hover .cliptile__pic img{transform:scale(1.05)}.cliptile:hover .cliptile__dot{transform:scale(1.08)}}.cliptile:focus-visible{outline:none}.cliptile:focus-visible .cliptile__pic{outline:2px solid var(--gold);outline-offset:3px}@media (prefers-reduced-motion:reduce){.cliptile__pic img,.cliptile__dot{transition:none}}