.blur-wrapper,.demo-wrapper,.easing-wrapper,.list-wrapper,.speed-wrapper{margin:24px 0;padding:32px;border:1px solid #e5e5e5;border-radius:12px;background:#fff}.demo-row{justify-content:center;gap:48px}.demo-item,.demo-row{display:flex;align-items:center}.demo-item{flex-direction:column;gap:12px}.demo-btn{padding:8px 20px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;font-size:14px;transition:background .15s ease-out;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.demo-btn:hover{background:#f5f5f5}.demo-btn.with-scale{transition:transform .1s ease-out,background .15s ease-out}.demo-btn.with-scale:active{transform:scale(.97)}.demo-label{color:#999;font-size:12px}.easing-row{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}.easing-item{display:flex;align-items:center;gap:16px}.easing-track{overflow:hidden;flex:1 1;position:relative;height:92px;border-radius:8px}.easing-info{text-align:center}.easing-info span{font-size:12px}.easing-circle{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:#111}.easing-square{margin:16px auto;width:60px;height:60px;border-radius:8px;background:#111}.easing-square.playing.custom{animation:rotate 2s cubic-bezier(.645,.045,.355,1) .5s forwards}.easing-square.playing.default{animation:rotate 2s ease-in-out .5s forwards}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.easing-label{width:80px;color:#666;font-size:13px;font-family:monospace}.easing-controls{display:flex;justify-content:center;margin-top:12px}.ctrl-btn{padding:8px 16px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;font-size:13px;transition:background .15s;cursor:pointer}.ctrl-btn:hover{background:#f5f5f5}.speed-row{display:flex;justify-content:center;gap:48px}.speed-item{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}.speed-label{color:#999;font-size:12px;font-family:monospace}.dropdown-trigger{padding:8px 16px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;font-size:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dropdown-trigger:hover{background:#f5f5f5}.dropdown-menu{overflow:hidden;position:absolute;z-index:10;top:calc(100% + 4px);right:0;left:0;border:1px solid #e5e5e5;border-radius:8px;background:#fff;transform-origin:top center;animation:dropdown-in var(--duration) cubic-bezier(.16,1,.3,1) forwards}.dropdown-menu.slow{--duration:400ms}.dropdown-menu.fast{--duration:180ms}.dropdown-option{padding:8px 16px;font-size:14px;cursor:pointer}.dropdown-option:hover{background:#f5f5f5}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.blur-row{justify-content:center;gap:48px}.blur-item,.blur-row{display:flex;align-items:center}.blur-item{flex-direction:column;gap:12px}.blur-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;cursor:pointer}.blur-btn.scale-btn{transition:transform .1s ease-out}.blur-btn.scale-btn:active{transform:scale(.97)}.blur-icon{display:inline-block;width:20px;height:20px;border:2px solid #111;border-radius:50%;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-radius .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.blur-icon.filled{border-color:#111;border-radius:4px;background:#111}.blur-icon.with-blur{filter:blur(0);transition:background-color .15s cubic-bezier(.4,0,.2,1),border-radius .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),filter .15s cubic-bezier(.4,0,.2,1);animation:blur-transition .15s cubic-bezier(.4,0,.2,1) forwards}@keyframes blur-transition{0%{opacity:.5;filter:blur(2px)}to{opacity:1;filter:blur(0)}}.list-wrapper .list-row{display:flex;justify-content:center;gap:24px}.list-wrapper .list-col{display:flex;flex-direction:column;width:200px}.list-wrapper .list-label{margin-bottom:8px;color:#999;font-size:12px;text-align:center}.list-wrapper .list-wrap{padding:0;border:1px solid #e5e5e5;border-radius:8px;list-style:none}.list-wrapper .list-item{padding:10px 14px;border-bottom:1px solid #e5e5e5;background:#fff;font-size:14px;cursor:pointer}.list-wrapper .list-item.with-anim{transition:background .3s ease-out,transform .3s ease-out}.list-wrapper .list-item.no-anim:hover,.list-wrapper .list-item.with-anim:hover{background:#f5f5f5}.list-wrapper .list-icons{display:flex;justify-content:center;gap:24px;margin-top:16px}.list-wrapper .list-icons .list-icon{display:flex;justify-content:center;width:200px;font-size:20px}