:root{color:#fff;background:#fff;font-family:SF Pro Display,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100dvh;overflow:auto}button,input,textarea,select{font:inherit}.blending-app{background:#fff;align-content:start;place-items:start center;row-gap:40px;min-height:100dvh;padding:56px 24px 24px;display:grid}.blending-demo{flex-direction:column;gap:18px;width:min(100%,800px);display:flex}.blending-footer{color:#737373;text-align:center;justify-self:center;gap:6px;max-width:min(100%,520px);margin-top:0;font-size:.875rem;line-height:1.45;display:grid}.blending-footer p{margin:0}.blending-footer a{color:#171717;text-underline-offset:3px;text-decoration:none}.blending-footer a:hover{text-decoration:underline}.blending-stage{background:#000;border-radius:28px;width:100%;height:600px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff14,0 30px 90px #0000005c}.blending-stage.visualizing,.blending-stage.visualizing *{cursor:none!important}.blending-stage.visualizing.interacting,.blending-stage.visualizing.interacting *,.blending-stage.visualizing .blending-stage-controls,.blending-stage.visualizing .blending-stage-controls *{cursor:auto!important}.blending-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.blending-bounds-overlay{z-index:1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.blending-stage-controls{z-index:3;pointer-events:auto;align-items:center;gap:16px;display:flex;position:absolute;top:14px;left:14px}.blending-improved-toggle{color:#ffffffeb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);-webkit-user-select:none;user-select:none;background:#ffffff2e;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:8px;padding:10px 15px;font:600 13px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;box-shadow:0 0 22px #00000029}.blending-improved-checkbox{border:1px solid;border-radius:4px;width:13px;height:13px}.blending-improved-toggle.active{color:#111;background:#ffffffdb;border-color:#1111111f}.blending-improved-toggle.active .blending-improved-checkbox{background:currentColor;box-shadow:inset 0 0 0 3px #ffffffdb}.blending-spacing-control{color:#ffffffeb;text-shadow:0 1px 8px #0000006b;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font:600 13px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}.blending-spacing-control input{accent-color:#fff;width:120px;margin:0}.blending-interaction-layer{z-index:2;pointer-events:none;position:absolute;inset:0}.blending-shape-hitbox{pointer-events:auto;cursor:grab;touch-action:none;transform-origin:50%;position:absolute;top:50%;left:50%}.blending-shape-hitbox:active{cursor:grabbing}.blending-edge-hit{z-index:1;position:absolute}.blending-edge-hit.top,.blending-edge-hit.bottom{cursor:ns-resize;height:32px;left:20px;right:20px}.blending-edge-hit.top{top:20px;transform:translateY(-50%)}.blending-edge-hit.bottom{bottom:20px;transform:translateY(50%)}.blending-edge-hit.left,.blending-edge-hit.right{cursor:ew-resize;width:32px;top:20px;bottom:20px}.blending-edge-hit.left{left:20px;transform:translate(-50%)}.blending-edge-hit.right{right:20px;transform:translate(50%)}.blending-corner-hit{z-index:2;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.24' stroke-width='4.4' transform='translate(0 1)'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='4.2'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16,alias;border-radius:999px;width:40px;height:40px;position:absolute}.blending-corner-hit.top-left{top:20px;left:20px;transform:translate(-50%,-50%)}.blending-corner-hit.top-right{top:20px;right:20px;transform:translate(50%,-50%)}.blending-corner-hit.bottom-right{bottom:20px;right:20px;transform:translate(50%,50%)}.blending-corner-hit.bottom-left{bottom:20px;left:20px;transform:translate(-50%,50%)}.blending-stage.visualizing.interacting .blending-shape-hitbox{cursor:grabbing!important}.blending-stage.visualizing.interacting .blending-edge-hit.top,.blending-stage.visualizing.interacting .blending-edge-hit.bottom{cursor:ns-resize!important}.blending-stage.visualizing.interacting .blending-edge-hit.left,.blending-stage.visualizing.interacting .blending-edge-hit.right{cursor:ew-resize!important}.blending-stage.visualizing.interacting .blending-corner-hit{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23000' stroke-opacity='.24' stroke-width='4.4' transform='translate(0 1)'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='4.2'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M10 23V16Q10 10 16 10H23'/%3E%3Cpath d='M10 23L5.8 18.8'/%3E%3Cpath d='M10 23L14.2 18.8'/%3E%3Cpath d='M23 10L18.8 5.8'/%3E%3Cpath d='M23 10L18.8 14.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16,alias!important}