.blur-wrapper,.demo-wrapper,.easing-wrapper,.list-wrapper,.speed-wrapper{margin:24px 0;padding:32px;border:1px solid #ddd;border-radius:12px;background:#f4f5f5}html[data-theme=dark] .blur-wrapper,html[data-theme=dark] .demo-wrapper,html[data-theme=dark] .easing-wrapper,html[data-theme=dark] .list-wrapper,html[data-theme=dark] .speed-wrapper{border-color:#444;background:#2a2a2a}.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;color:#000;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;color:#000;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{overflow:hidden;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;color:#000;font-size:14px;cursor:pointer}.list-wrapper .list-item:last-of-type{border-bottom:none}.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}.scroll-anim-wrapper{overflow:hidden scroll;margin-bottom:20px;height:400px;border:1px solid var(--color-border);border-radius:var(--radius-large);background:var(--color-surface)}html[data-theme=dark] .scroll-anim-wrapper{border-color:#444;background:#2a2a2a}.scroll-anim-wrapper .scroll-anim-hint{display:flex;align-items:center;justify-content:center;height:400px;color:var(--color-text-muted);font:var(--body-4-regular)}.scroll-anim-wrapper .scroll-anim-content{display:flex;flex-direction:column;gap:24px;padding:24px 24px 32px}.scroll-anim-wrapper .scroll-anim-row{display:flex;flex-wrap:wrap;gap:12px}.scroll-anim-wrapper .scroll-anim-item{opacity:0;padding:30px 20px;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-background);color:var(--color-text-muted);font:var(--body-4-regular);transition:opacity .8s,transform .8s}.scroll-anim-wrapper .scroll-anim-item.scroll-right{transform:translate(-30px)}.scroll-anim-wrapper .scroll-anim-item.scroll-left{transform:translate(30px)}.scroll-anim-wrapper .scroll-anim-item.scroll-up{transform:translateY(20px)}.scroll-anim-wrapper .scroll-anim-item.scroll-down{transform:translateY(-20px)}.scroll-anim-wrapper .scroll-anim-item.on{opacity:1;transform:translate(0)}.scroll-anim-wrapper .scale-item{display:flex;opacity:0;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-medium);background:var(--color-accent);color:var(--color-white);font:var(--body-3-bold);transform:scale(0)}.scroll-anim-wrapper .scroll-anim-scale{display:flex;gap:12px}.scroll-anim-wrapper .scroll-anim-scale .scale-item{opacity:0;transform:scale(0)}.scroll-anim-wrapper .scroll-anim-scale.on .scale-item{animation:scale-in .6s forwards}@keyframes scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}